我有一个页面，有两个表单，一个用于提交一些数据并从数据库返回数据，另一个用于在数据库上自动完成搜索，然后从数据库返回信息。这两个表单在不同的页面中按预期工作，现在我试图将它们放在一个页面中，但如果我在第二个表单上执行自动完成/全文搜索，我会从第一个表单中得到结果。我认为问题是javascript在第一个表单中捕获数据，无论按下了什么提交按钮，这两个表单都有不同的操作路线。这是第一个脚本：
jQuery(function ($) {
$(document).ready(function () {
var form = $('form');
form.submit(function (e) {
e.preventDefault();
$.ajax({
url: form.prop('action'),
type: 'post',
dataType: 'json',
data: form.serialize(),
success: function (data) {
var obj = (data);
var resultStr = "";
//something
$("#results").html(resultStr);
}
});
});
});
});
第二个
$(document).ready(function () {
$('input:text').bind({});
$('input:hidden').bind({});
$("#models").autocomplete({
minLength: 1,
source: URL
});
});
那么，为什么页面返回resultStr并填充div，而不是我在使用第二个脚本进行全文搜索后询问的数据呢？知道吗？
好的，如果您想将相同的提交事件附加到所有表单，然后确定提交了哪个表单，以便检索表单的action，例如，您需要按照最初的方式进行，然后在提交块中检索表单对象，如下图所示：
以下是jsFiddle示例：http://jsfiddle.net/bu9v52fm/
jQuery(function ($) {
$(document).ready(function () {
//attach event to all forms
$('form').submit(function (e) {
//output $(this) form into a variable and proceed
//--------------
var form = $(this);
//--------------
e.preventDefault();
$.ajax({
url: form.prop('action'),
type: 'post',
dataType: 'json',
data: form.serialize(),
success: function (data) {
var obj = (data);
var resultStr = "";
//something
$("#results").html(resultStr);
}
});
});
});
});