如何使用ajax jquery获取表单字段值并将其作为json发送到服务器

Question

我有一个包含6个字段和1个搜索按钮的搜索表单。当用户填写表单详细信息并单击搜索按钮时，我需要使用jqueryajax将表单字段值作为json发送到服务器。

然后服务器将发送搜索值并返回响应，然后我需要在ui中填充这些valuse。我需要jquery ajax的示例UI代码。有人能帮忙吗？下面是我的html表单

<form name="NAME" id="customerDetailSearchForm" action="">
  <fieldset>
     <legend>Search Contact</legend>
     <table width="100%" cellpadding="0" cellspacing="0" class="vzuui-detailpanel">
        <tr>
           <td><label>Name :</label><input type="text" value="" /></td>
           <td><label>City :</label><input type="text" value="" /></td>
           <td><label>Phone :</label><input type="text" value="" /></td>
        </tr>
        <tr>
           <td><label>Address :</label><input type="text" value="" /></td>
           <td><label>State Prov :</label><input type="text" value="" /></td>
           <td><label>Email :</label><input type="text" value="" /></td>
        </tr>
     </table>
  </fieldset>
   <button class="vzuui-btn-red-active closeedit" type="button" id="search">Search</button>

Answer 1

首先，您需要更改HTML表单代码，以便在下面的文本字段中包含name属性

<form name="NAME" id="customerDetailSearchForm" action="">
  <fieldset>
     <legend>Search Contact</legend>
     <table width="100%" cellpadding="0" cellspacing="0" class="vzuui-detailpanel">
        <tr>
           <td><label>Name :</label><input type="text" value="" name="name" /></td>
           <td><label>City :</label><input type="text" value="" name="city" /></td>
           <td><label>Phone :</label><input type="text" value="" name="phone" /></td>
        </tr>
        <tr>
           <td><label>Address :</label><input type="text" value="" name="address" /></td>
           <td><label>State Prov :</label><input type="text" value="" name="state" /></td>
           <td><label>Email :</label><input type="text" value="" name="email" /></td>
        </tr>
     </table>
  </fieldset>
   <button class="vzuui-btn-red-active closeedit" type="button" id="search">Search</button>

这是必需的，因为我们将使用jQuery serializeArray() Method，而creates an array of objects (name and value) by serializing form values.

现在，jQuery部分将从表单中形成JSON数据，并进行AJAX调用。

<script type="text/javascript">
$(document).ready(function(){
  $("#search").click(function(){
     var frm = $("customerDetailSearchForm").serializeArray();
      var obj = {};
      for (var a = 0; a < frm.length; a++) {
         obj[frm[a].name] = frm[a].value;
      }
        var jsonData = JSON.stringify(obj);
    $.ajax({ 
        type: 'GET', 
        url: 'http://example.com', 
        data: jsonData , 
        dataType: 'json',
        success: function (data) { 
           // add result to UI code over here
        }
    });
  });
});
</script>

编辑

上面的javascript片段经过编辑以生成正确的JSON值

Answer 2

下面是我在Asp.net MVC中使用的简单Ajax代码我想这会对你有所帮助，

$.ajax({
                beforeSend: function (xhr) {
                    AjaxRequestStart();
                },
                error: function (result) {
                                     },
                complete: function () {
                    AjaxRequestFinish();
                },
                url: '@Url.Content("~/Project/SaveProject")',
                type: 'POST',
                data: $('#frmAddProject').serialize(),
                success: function (result) {
                }
            });

Answer 3

我同意@Aniket的观点。首先为每个输入类型添加名称。

<form name="NAME" id="customerDetailSearchForm" action="your_url">
  <fieldset>
     <legend>Search Contact</legend>
     <table width="100%" cellpadding="0" cellspacing="0" class="vzuui-detailpanel">
        <tr>
           <td><label>Name :</label><input type="text" value="" name="name" /></td>
           <td><label>City :</label><input type="text" value="" name="city" /></td>
           <td><label>Phone :</label><input type="text" value="" name="phone" /></td>
        </tr>
        <tr>
           <td><label>Address :</label><input type="text" value="" name="address" /></td>
           <td><label>State Prov :</label><input type="text" value="" name="state" /></td>
           <td><label>Email :</label><input type="text" value="" name="email" /></td>
        </tr>
     </table>
  </fieldset>
   <button class="vzuui-btn-red-active closeedit" onclick="_submit();" type="button" id="search">Search</button>

对于调用ajax，您可以使用它。

function _submit{
       $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'your_url',
                data: $("#customerDetailSearchForm").serialize(),
                success: function(responseData, textStatus) {
                    // you implementation logic here
                },
                complete: function(textStatus) {
                },
                error: function(responseData)
                {
                }
            });
        }

Answer 4

开始

使用jQuery 将表单数据转换为JavaScript对象

但在此之前，您必须为每个输入元素添加name属性。

因此，该名称将是您的json密钥，框中的数据将是该密钥的值，如下所示

<input name='username' value='' />

将成为

{"username": "john"}

jhon是在输入框中输入的值。

**编辑（Ajax代码）**

$(function() {
    $('#customerDetailSearchForm').submit(function() {
     $.post("//your URL here",JSON.stringify($('#customerDetailSearchForm').serializeObject()), function(result){
        alert("Data posted successfully!!");
    });
  });
});

或者如果您在表单中没有提交按钮，请替换下面的行

$('#customerDetailSearchForm').submit(function() {

带有

$('#search').click(function() {

Answer 5

您可以参考以下表单提交的ajax调用示例

$（"#customerDetailSearchForm"）.submit（函数（e）{var postData=$（'#conatctUs'）.serializeArray（）；var formURL=$（'#conatctUs'）.attr（"action"）；var formName=$（'#conatctUs'）.attr（'name'）；$.ajax({url:formURL，类型："POST"，data:postData，成功：函数（数据）{if（data.status）{console.log（数据）；}}，error:函数（jqXHR，textStatus，errorThrown）{}e.preventDefault（）；})；