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

Question

我有六个字段和一个搜索按钮的搜索表单。当用户填写表单deatails并单击搜索按钮时，我需要使用jQuery ajax将表单字段值作为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

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

现在改变你的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部分从表单中形成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> 

EDIT

上面JavaScript代码段编辑，以产生适当的JSON值

Answer 2

在这里你去

Convert form data to JavaScript object with jQuery

但是你必须添加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 3

这里简单的Ajax代码，我在Asp.net中使用MVC 我想这会帮助你，

$.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 4

在这里，我与@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 5

您可以参考下面的示例Ajax调用的形式提交

 

    $("#customerDetailSearchForm").submit(function(e) { 

      var postData = $('#conatctUs').serializeArray(); 
      var formURL = $('#conatctUs').attr("action"); 
      var formName = $('#conatctUs').attr('name'); 

      $.ajax({ 
        url : formURL, 
        type: "POST", 
        data : postData, 
        success:function(data) 
        { 
         if(data.status){ 
          console.log(data); 
         } 
        }, 
        error: function(jqXHR, textStatus, errorThrown) 
        { 

        } 


      e.preventDefault(); 
    });