首先,我不擅长 javascript……我复制了一些代码,这些代码几乎可以满足我的要求——提交表单并更新我的数据库而无需刷新页面。问题是我页面上的每个表单现在都在这样做。我只想要这个特定的形式来调用函数。有人可以帮帮我吗?
Javascript
<script>
$(function () {
$('form').bind('click', function (event) {
// using this page stop being refreshing
event.preventDefault();
$.ajax({
type: 'POST',
url: 'ajax/post.php',
data: $('form').serialize(),
success: function () {
alert('Movie added to your list.');
}
});
});
});
</script>
HTML 格式
<form style="display: inline-block;">
<input style="display: none" type="text" name="title" value="<?php echo $title; ?>" />
<input style="display: none" name="favorite" value="favorite" />
<input style="color: #c0bfbf; padding: 0px 6px; background-color: transparent; border: 1px solid #c0bfbf; border-radius: 6px;" name="submit" type="submit" value="MY LIST"><?php } ?>
</form>
我尝试了多次谷歌搜索,但无法解决我页面上每个表单调用该函数的问题
试试这个
<script>
$(function () {
$('#add').bind('click', function (event) {
// using this page stop being refreshing
event.preventDefault();
$.ajax({
type: 'POST',
url: 'ajax/post.php',
data: $('form').serialize(),
success: function () {
alert('Movie added to your list.');
}
});
});
});
</script>
HTML 表格
<form id="add" style="display: inline-block;">
<input style="display: none" type="text" name="title" value="<?php echo $title; ?>" />
<input style="display: none" name="favorite" value="favorite" />
<input style="color: #c0bfbf; padding: 0px 6px; background-color: transparent; border: 1px solid #c0bfbf; border-radius: 6px;" name="submit" type="submit" value="MY LIST"><?php } ?>
</form>
问题是您没有在表单中提到
ID
,而是简单地称为$('form').bind
,这意味着它将绑定在<form>
标签中输入的所有输入,并且只会发送提交。
所以现在我们已经在表单中指定了
id
所以脚本将仅通过表单运行输入ID
你的代码的问题是,当函数执行时,事件连接到页面上的所有表单。
要解决此问题,您可以在要触发该功能的表单中添加一个独特的
id
或class
,并将点击事件仅绑定到该特定表单。这是一个例子:
HTML:
<form id="myForm" style="display: inline-block;">
<input style="display: none" type="text" name="title" value="<?php echo $title; ?>" />
<input style="display: none" name="favorite" value="favorite" />
<input style="color: #c0bfbf; padding: 0px 6px; background-color: transparent; border: 1px solid #c0bfbf; border-radius: 6px;" name="submit" type="submit" value="MY LIST">
</form>
Javascript:
<script>
$(function () {
$('#myForm').bind('click', function(event) {
// using this page stop being refreshing
event.preventDefault();
$.ajax({
type: 'POST',
url: 'ajax/post.php',
data: $('#myForm').serialize(),
success: function () {
alert('Movie added to your list.');
}
});
});
});
</script>