每次点击都通过 ajax 发送表单答案

【问题标题】：sending form via ajax everytime clicked每次点击都通过 ajax 发送表单
【发布时间】：2017-06-03 13:58:24
【问题描述】：

我想通过单击每个提交按钮来发送我的表单。

我的问题：我如何发送每个表格并分别说明每个结果。我已经测试了以下代码，但它没有发送任何东西，并且 div 中没有结果 ‍.divs：

$("form").on('submit',function(e) {
  var url = 'http://seller.ir/test'
  $.ajax({
    type: "POST",
    url: url,
    data: $(this).serialize(),
    success: function(data) {
      $(this).find('.divs').empty
      $(this).find('.divs').html(data)

    }
  });
  e.preventDefault();
});

form{
	width:100px;
	border:1px solid blue;
	height:50px;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="divs">
<form>
<button id="done"type="submit">done</button>
</form>
</div>
<div class="divs">
<form>
<button id="done" type="submit">done</button>
</form>
</div>
<div class="divs">
<form>
<button id="done" type="submit">done</button>
</form>
</div>

【问题讨论】：

ajax 成功后，表单被移除。添加html(data).for 更好，您可以在表单中添加.divs
@prasad 是的，我想删除表单并显示第二页的结果而不是那个
首先使用error函数调试AJAX。其次有一个简单的方式通过ajax发送表单，看看这个链接malsup.com/jquery/form/#file-upload
我给你的链接是提交图片但你可以提交表单，直接链接是malsup.com/jquery/form/#ajaxSubmit
@inaz ：你为什么要多次问类似的问题？这与this 和this 有何不同？

标签： javascript jquery html ajax

【解决方案1】：

您的代码的唯一问题是您的表单没有.divs 作为其后代。请阅读.find()的文档。

获取当前匹配元素集中每个元素的后代，由选择器、jQuery 对象或元素过滤。

将您的 HTML 更改为

<form>
  <button id="done"type="submit">done</button>
  <div class="divs"></div>
</form>
<form>
  <button id="done"type="submit">done</button>
  <div class="divs"></div>
</form>
<form>
  <button id="done"type="submit">done</button>
  <div class="divs"></div>
</form>

现在，如果你按下 done 按钮，相应的表单将触发其submit 事件，该事件将由 jQuery 处理。此外，正如其他答案所指出的，不同元素的 ID 对于 HTML 页面必须是唯一的。

如果只是替换内部div的内容，这一行就足够了。

$(this).find('.divs').html(data);

你不需要先清空 div。

【讨论】：