如何獲取表單字段值並將其作爲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(); 
    });