每次点击都会通过ajax发送表单 [英] sending form via ajax everytime clicked

问题描述

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

我的问题：如何发送每个表单并分别指示每个结果。我测试了下面的代码，但它没有发送任何东西，并且没有使用 .divs 的结果：

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;边框：1px纯蓝色;高度：50像素; }  

 < 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 =donetype =submit> ;完成< / form>< / div>< div class =divs>< form>< button id =donetype =submit> done< / button> < / form>< / div>  

解决方案

你的代码唯一的问题是你的表单没有 .divs 作为它们的后代。请阅读 .find（）的文档。

获取当前匹配元素集合中每个元素的后代，并通过选择器，jQuery对象或元素进行过滤。

将HTML改为



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

现在，如果您按完成按钮，相应的表单将触发它的 submit 事件，它将由jQuery处理。另外，正如其他答案指出的那样，不同元素的ID对于HTML页面必须是唯一的。

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

  $（this）.find（'。的div）的html（数据）。 
  

您不需要先清空div。

I want to send my forms by click on each submit button.

My question: How can i send each forms and indicate each result separately. I've tested the following code but it does not send any thing and there is no result in div with ‍.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>

解决方案

The only problem with your code is that your forms don't have .divs as their descendants. Please read the documentation of .find().

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

Change your HTML to

<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>

Now, if you press the done button, the corresponding form will trigger its submit event, which will be handled by jQuery. Also, as other answers pointed out, IDs for different elements have to be unique for an HTML page.

If you're just replacing the contents of the inner div, this line is sufficient.

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

You don't need to empty the div first.

这篇关于每次点击都会通过ajax发送表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！