如何使用 post 到服务器端脚本提交表单输入值答案

【问题标题】：How to submit forms input values using post to server side script如何使用 post 到服务器端脚本提交表单输入值
【发布时间】：2016-04-17 10:33:01
【问题描述】：

我有很多按钮，每个按钮都会打开它的表单。如何获取当前打开的表单的输入值，并将其发布到我的服务器上，例如 post("/addOrders", valueOfinputs)？

https://jsfiddle.net/ave6uvez/21/

                 <div class="rows">


  <div class="row">


    <button class="open">Buy</button>

      <form id="myform" action="/index" method="post">
      <div class="form-group">
        <label for="exampleInputEmail1">Name</label>
        <input type="namee"  name ="name" >
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Phone</label>
        <input type="phone" name = "phone" >
      </div>

      <button  class="ave" >Close</button>
       <INPUT type="submit" id = "submit" class = "close" value="Submit">
   <!----   <button id="submit" class="close"></button>-->

    </form>


  </div>


</div>

【问题讨论】：

您是希望同一个服务器端脚本处理所有表单提交还是希望不同的表单提交给不同的脚本
我不太明白这个问题。我的服务器端控制器将处理一个表单的提交并将表单中的值放入数据库。从用户单击提交的一种形式。
明白了，可以用ajax了。请参阅下面的答案。

标签： javascript jquery forms post

【解决方案1】：

试试这个，

$("#submit").click(function(e){
    $.post("/addOrders",$("#myForm").serialize());
    return null;
})

.serialize() 会将所有表单元素数据放入请求中

另外你需要为不同的表单提交按钮提供不同的id，你必须为每个提交按钮做上面的代码

希望这对你有用。

【讨论】：

为什么我不能这样序列化：在 $('.row').on('click', '.close', function(e) {$(this).parent(' form').serialize();}
可以，只要你的按钮有不同的ID
我没有使用按钮 id，只是在 onclick 函数中类。

【解决方案2】：

这是一个简单的参考：

   // this is the id of the forms, set the form ids accordingly.
   $("#idForm").submit(function(e) {

 var url = "path/to/your/script.php"; // the script where you handle the form input.

$.ajax({
       type: "POST",
       url: url,
       data: $("#idForm").serialize(), // serializes the form's elements.
       success: function(data)
       {
           alert(data); // show response from the php script.
       }
     });

e.preventDefault(); // avoid to execute the actual submit of the form.
});

【讨论】：