Ajax for dynamic load data sharing

This article is mainly for everyone to introduce the AJAX dynamic loading data of small examples, with a certain reference value, interested in small partners can refer to, hope to help everyone.

Objective:

1. This essay implements an example of dynamic Ajax loading.

2. Implemented using the. NET MVC framework.

3. This example focuses on the previous background interaction, and the other is slightly written.

Begin:

1. Controller ActionResult Code (for displaying pages)

    <summary>///Telephone Enquiry page///</summary>//    <returns></returns>    Public ActionResult phonesearch (String sql)    {      phonelist= queries data from the database;      viewbag.phonelist = phonelist;      return View ();    }

2. Front Page main code

Description: This is the table to display the data, and the fields to match the model you built.

<table border= "1" cellspacing= "0" cellpadding= "0" class= "Tolang" id= "phonetable" > <tr>                <th> Serial number </th> <th> company </th> <th> Department </th> <th> Group </th> <th> name </th> <th> jobs </th> <t H> telephone </th> </tr> <tbody id= "Todelisttbody" > @if (Viewbag.phon EList! = null) {foreach (var item in viewbag.phonelist) {num              ber = number + 1; <tr> <td> @number </td> <td> @item. Conpany</td> <td> @item. Department</td> <td> @item. Team</td> <td> @item. Name</td> <td> @item. Position</td> <td> @item. Phonenumber</td>                  </tr>}} </tbody> </table> 

3. My query criteria

<p style= "Display:block;float:left; width:100%; ">          :          <select class=" Inputteststyle "id=" Company "onclick=" Initdeptselect () ">            <option >== Please select company ==</option>          </select>          Department:          <select class= "Inputteststyle" id= "department" Onclick= "Initgroupselect ()" >            <option>== Please select company ==</option>          </select>          Group:          <select class= "Inputteststyle" id= "group" onclick= "Queryphonenum ()" >            <option>== Please select company ==</ option>          </select> </p>

4. Initialization of the query condition (take the company as an example)

4.1 Front-desk JavaScript code

  When you open the page, execute  window.onunload = Initcompanyselect ();  Initialize the "Company" drop-down box  function Initcompanyselect ()  {    $.ajax ({      type: ' POST ',      URL: '/home/ Getcompantlistforphone ',      dataType: ' JSON ', data      : {},      success:function {        //1. Empty This drop-down box        //$ (' #company option '). Remove ();////can also successfully implement        $ (' #company '). empty ();        $ ("#company"). Append ($ (' <option> ' + ' = = Please select company = = ' + ' </option> '));        2. Dynamically load the return value into the drop-down box and dynamically generate the label. For        (i = 0; i < data.length;i++)        {          $ ("#company"). Append ($ (' <option > ' + data[i]. Conpany + ' </option> ');        }      ,      error:function (XMLHttpRequest, Textstatus, Errorthown) {        Alert ("The operation failed! ");      }    })  }

4.2 Initialize drop-down box corresponding to the ActionResult code

<summary>///Get Telephone Enquiry Company drop-down data///</summary>///<returns></returns>[httppost]public Jsonresult Getcompantlistforphone () {    compantlist = Gets the collection of this drop-down box data from the database;  return Json (compantlist);}

The other two drop-down boxes follow this method after completion. Can be queried based on the criteria. The following two are pairs of JavaScript and background methods.

5. Pass the query to the background, and then re-assign the table value based on the returned collection.

Query phone function queryphonenum () {if ($ (' #group ') according to the condition. val () = = ' = = Please select group = = ') {return;    } number = 0; $.ajax ({type: ' POST ', url: '/home/phonesearchsubmit ', DataType: ' JSON ', data: {company:$ (' #co Mpany '). Val (), Dept: $ (' #department '). Val (), Group: $ (' #group '). Val ()}, Success:function (Phonel                IST) {//1. Empty the data for this table $ (' #todeListTBODY tr '). Remove ();        2. Dynamically load the return value into the table.          $.each (phonelist, function (index, Element) {Number = number + 1;               $ (' #todeListTBODY '). prepend (function (i) {return "<tr>" + "<td>" +number + "<td>" + element. Conpany + "<td>" + element. Department + "<td>" + element. Team + "<td>" + element. Name + "<td>" + element. Position + "<td>" + element.          PhoneNumber + "</tr>";     })   })}, Error:function (XMLHttpRequest, Textstatus, Errorthown) {alert ("Operation failed!      "); }    })  }

5.1 ActionResult corresponding to the query data

<summary>///Telephone Enquiry//</summary>///<returns></returns>[httppost]public JsonResult Phonesearchsubmit (String company, String dept, String Group) {  phonelist = Query data based on criteria;  return Json (phonelist);}