如何获取表单字段值并使用ajax jquery作为json发送到服务器 [英] how to get form field value and send to server as json using ajax jquery

问题描述

我有6个字段和1个搜索按钮的搜索表单.当用户填写表单数据并单击搜索按钮时，我需要使用jquery ajax将表单字段值作为json发送到服务器.

I have search form with 6 fields and 1 search button. when user fill the form deatails and click on search button, i need to send the form field values as json to server using jquery ajax.

然后服务器将发送搜索值并返回响应，然后我需要在ui中填充这些值.我需要jquery ajax的示例UI代码.请任何人可以帮忙吗? 下面是我的html表单

then the server will send the search values and returns the response, then i need to populate those valuse in ui. i need sample UI code for jquery ajax . please can anyone help on this? below is my html form

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

推荐答案

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

First of all you will need to change you HTML form code to include name attribute in the textfields like below

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

This is required because we will be using jQuery serializeArray() Method which creates an array of objects (name and value) by serializing form values.

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

Now the jQuery part to form the JSON data from your form and make the AJAX call.

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

The above javascript snippet edited to generate proper JSON value

这篇关于如何获取表单字段值并使用ajax jquery作为json发送到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！