Question

我的页面上有几个表单，我使用这个脚本基本上都可以调用一个动作：

$(function () {
    $('form').submit(function () {

        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $('#result').html(result.result);
                }
            });
        }
        return false;
    });
});

每个表格里面都有一个div，它将包含结果。但是在这一步我有一个问题，因为我有所有这些的单个jquery脚本，我如何分离结果，他们应该与表格（当前形式内的div）相关联？

Answer 1

$(function () {
    $('form').submit(function () {
       var thisform = $(this);
        if (currentform.valid()) {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    thisform.find('.result').html(result.result);
                }
            });
        }
        return false;
    });
});

在表单中，使用类而不是ID，因为ID是唯一的。

<form> ..<div class="result"></div> </form>

因此，此处的关键部分是您提交的表单的上下文

current form > find > element

...

thisform.find('.result').html(result.result);

我们还将活动表单分配给变量 - 不需要每次都重新创建jquery对象

var thisform = $(this);

Answer 2

您可以使用当前表单上下文并在“this”中找到div。

$.ajax({
  url: this.action,
  type: this.method,
  data: $(this).serialize(),
  context: this,
  success: function (result) {
        $(this).find('#result').html(result.result);
  }
});

多个Jquery ajax表单请求和单独的结果

2 个答案: