jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

对于问题从后台获取json数据，将内容填充到下拉列表，代码非常简单，具体过程请看下面代码。

需求：url:链接     par：ID       sel：下拉列表选择器

function BuildSelectBox(url, par, sel) {

 $(sel).empty();

 $.getJSON(url, { id: par }, function (json, textStatus) {

  for (var i = json.length - 1; i >= 0; i--) {

   $(sel).prepend(‘<option value="‘ + json[i].Id + ‘">‘ + json[i].Name + ‘</option>‘)

  };

  $(sel).prepend(‘<option value="0">请选择</option>‘)

 });

}

以上代码很简单吧，此问题很easy的解决了。

Jquery 使用Ajax获取后台返回的Json数据页面处理过程

具体实现过程请看下面代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 <title></title>

 <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>

 <script type="text/javascript">

  $(function () {

   $.ajax({

    url: ‘jsondata.ashx‘,

    type: ‘GET‘,

    dataType: ‘json‘,

    timeout: 1000,

    cache: false,

    beforeSend: LoadFunction, //加载执行方法

    error: erryFunction, //错误执行方法

    success: succFunction //成功执行方法

   })

   function LoadFunction() {

    $("#list").html(‘加载中...‘);

   }

   function erryFunction() {

    alert("error");

   }

   function succFunction(tt) {

    $("#list").html(‘‘);

    //eval将字符串转成对象数组

    //var json = { "id": "10086", "uname": "zhangsan", "email": "[email protected]" };

    //json = eval(json);

    //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email);

    var json = eval(tt); //数组  

    $.each(json, function (index, item) {

     //循环获取数据

     var name = json[index].Name;

     var idnumber = json[index].IdNumber;

     var sex = json[index].Sex;

     $("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>");

    });

   }

  });

 </script>

</head>

<body>

 <ul id="list">

 </ul>

</body>

</html>

<%@ WebHandler Language="C#" Class="jsondata" %>

using System;

using System.Web;

using System.Web.Script.Serialization;

using System.IO;

using System.Text;

using System.Collections.Generic;

using Newtonsoft.Json;

using System.Data;

public class jsondata : IHttpHandler {

 public void ProcessRequest(HttpContext context)

 {

  context.Response.ContentType = "text/plain";

  string JsonStr = JsonConvert.SerializeObject(CreateDT());

  context.Response.Write(JsonStr);

  context.Response.End();

 }

 #region 创建测试数据源

 //创建DataTable

 protected DataTable CreateDT()

 {

  DataTable tblDatas = new DataTable("Datas");

  //序号列

  //tblDatas.Columns.Add("ID", Type.GetType("System.Int32"));

  //tblDatas.Columns[0].AutoIncrement = true;

  //tblDatas.Columns[0].AutoIncrementSeed = 1;

  //tblDatas.Columns[0].AutoIncrementStep = 1;

  //数据列

  tblDatas.Columns.Add("IdNumber", Type.GetType("System.String"));

  tblDatas.Columns.Add("Name", Type.GetType("System.String"));

  tblDatas.Columns.Add("BirthDate", Type.GetType("System.String"));

  tblDatas.Columns.Add("Sex", Type.GetType("System.String"));

  tblDatas.Columns.Add("Wage", Type.GetType("System.Decimal"));

  tblDatas.Columns.Add("Bonus", Type.GetType("System.Decimal"));

  //统计列开始

  tblDatas.Columns.Add("NeedPay", Type.GetType("System.String"), "Wage+Bonus");

  //统计列结束

  tblDatas.Columns.Add("Address", Type.GetType("System.String"));

  tblDatas.Columns.Add("PostCode", Type.GetType("System.String"));

  //设置身份证号码为主键

  tblDatas.PrimaryKey = new DataColumn[] { tblDatas.Columns["IdNumber"] };

  tblDatas.Rows.Add(new object[] { "43100000000000", "张三", "1982", "0", 3000, 1000, null, "深圳市", "518000" });

  tblDatas.Rows.Add(new object[] { "43100000000001", "李四", "1983", "1", 3500, 1200, null, "深圳市", "518000" });

  tblDatas.Rows.Add(new object[] { "43100000000002", "王五", "1984", "1", 4000, 1300, null, "深圳市", "518000" });

  tblDatas.Rows.Add(new object[] { "43100000000003", "赵六", "1985", "0", 5000, 1400, null, "深圳市", "518000" });

  tblDatas.Rows.Add(new object[] { "43100000000004", "牛七", "1986", "1", 6000, 1500, null, "深圳市", "518000" });

  return tblDatas;

 }

 #endregion

 public bool IsReusable

 {

  get

  {

   return false;

  }

 }

}

<!--

  <script type="text/javascript">

  $(function () {

   $.ajax({

    url: ‘jsondata.ashx‘,

    type: ‘GET‘,

    dataType: ‘json‘,

    timeout: 1000,

    cache: false,

    beforeSend: LoadFunction, //加载执行方法

    error: erryFunction, //错误执行方法

    success: succFunction //成功执行方法

   })

   function LoadFunction() {

    $("#list").html(‘加载中...‘);

   }

   function erryFunction() {

    alert("error");

   }

   function succFunction(tt) {

    $("#list").html(‘‘);

    //eval将字符串转成对象数组

    //var json = { "id": "10086", "uname": "zhangsan", "email": "[email protected]" };

    //json = eval(json);

    //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email);

    var json = eval(tt); //数组  

    $.each(json, function (index, item) {

     //循环获取数据

     var Key = json[index].key;

     var Info = json[index].info;

     //     var idnumber = json[index].IdNumber;

     //     var sex = json[index].Sex;

     $("#list").html($("#list").html() + "<br>" + Key + "----" + Info.name); //+ " - " + idnumber + " - " + sex + "<br/>");

    });

   }

  });

 </script>

-->

<%@ WebHandler Language="C#" Class="jsondata" %>

using System;

using System.Web;

using System.Web.Script.Serialization;

using System.IO;

using System.Text;

using System.Collections;

using System.Collections.Generic;

using System.Data;

public class jsondata : IHttpHandler {

 public void ProcessRequest(HttpContext context)

 {

  context.Response.ContentType = "text/plain";

  context.Response.Cache.SetNoStore();

  string data = "[{\"key\":\"1\",\"info\":{\"name\":\"222\",\"age\":\"333\",\"sex\":\"444\"}},{\"key\":\"2\",\"info\":{\"name\":\"999\",\"age\":\"000\",\"sex\":\"111\"}}]";

  context.Response.Write(new JavaScriptSerializer().Serialize(data));

 }

 public bool IsReusable

 {

  get

  {

   return false;

  }

 }

}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2013.aspx.cs" Inherits="Test2013" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

 <title></title>

 <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>

 <script type="text/javascript">

  function GetPara(o) {

   var sortid = $(o).val();

   $.ajax({

    url: ‘GetPara.ashx?type=get&sortid=‘ + sortid,

    type: ‘GET‘,

    dataType: ‘json‘,

    timeout: 3000,

    cache: false,

    beforeSend: LoadFunction, //加载执行方法 

    error: erryFunction, //错误执行方法 

    success: succFunction //成功执行方法 

   })

   function LoadFunction() {

    $("#list").html(‘加载中...‘);

   }

   function erryFunction() {

    alert("error");

   }

   function succFunction(tt) {

    $("#list").html(‘‘);

    var json = eval(tt); //数组

    $.each(json, function (index, item) {

     //循环获取数据 

     var Id = json[index].id;

     var Name = json[index].name;

     $("#list").html($("#list").html() + "<br>" + Name + "<input type=‘text‘ id=‘" + Id + "‘ /><br/>");

    });

   }

  };

  function SavePara() {

   var parameter = {};

   $("#list input:text").each(function () {

    var key = $(this).attr("id");

    var value = $(this).val();

    parameter[key] = value;

   });

   $.ajax({

    url: ‘GetPara.ashx?type=save‘,

    type: ‘POST‘,

    dataType: ‘json‘,

    data: parameter,

    timeout: 3000,

    cache: false,

    beforeSend: LoadFunction, //加载执行方法 

    error: erryFunction, //错误执行方法 

    success: succFunction //成功执行方法 

   })

   function LoadFunction() {

   }

   function erryFunction() {

   }

   function succFunction(tt) {

   }

  };

 </script>

</head>

<body>

 <form id="form1" runat="server">

 <div>

  <asp:DropDownList ID="ddl1" runat="server" onchange="GetPara(this)">

  </asp:DropDownList>

  <ul id="list"></ul>

  <input type="button" value="保存数据" onclick="SavePara()" />

 </div>

 </form>

</body>

</html>

<%@ WebHandler Language="C#" Class="GetPara" %>

using System;

using System.Web;

using System.Data;

using System.Collections.Generic;

using System.Web.Script.Serialization;

public class GetPara : IHttpHandler { 

 public void ProcessRequest (HttpContext context) {

  context.Response.ContentType = "text/plain";

  string SortId = context.Request["sortid"];

  string Type = context.Request["type"];

  if (Type=="get")

  {

   if (!string.IsNullOrEmpty(SortId))

   {

    DataTable dt = MSCL.SqlHelper.GetDataTable("select * from PR_PRODUCTPARAS where sortid=‘" + SortId + "‘ ");

    List<Paras> list = new List<Paras>();

    for (int i = 0; i < dt.Rows.Count; i++)

    {

     Paras a = new Paras();

     a.id = dt.Rows[i]["PARAID"].ToString();

     a.name = dt.Rows[i]["PARANAME"].ToString();

     list.Add(a);

    }

    context.Response.Write(new JavaScriptSerializer().Serialize(list));

   }

  }

  else if (Type == "save")

  {

   //反序列化json

   System.IO.Stream stream = context.Request.InputStream;

   System.IO.StreamReader sr = new System.IO.StreamReader(stream, System.Text.Encoding.GetEncoding("UTF-8"));

   string sJson = sr.ReadToEnd();

   if (sJson.Contains("&"))

   {

    string[] sArr = sJson.Split(‘&‘);

    for (int i = 0; i < sArr.Length; i++)

    {

     string[] sArr1 = sArr[i].Split(‘=‘);

     object id = sArr1[0];

     object value = sArr1[1];

    }

   }

  }

  else

  { }

 }

 public bool IsReusable {

  get {

   return false;

  }

 }

 public struct Paras

 {

  public string id;

  public string name;

 }

}

时间： 2024-10-24 06:14:44

jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表的相关文章

jquery用ajax方式从后台获取json数据，将内容填充到下拉列表。

从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--) { $(sel).prepend('<option value=

通过jquery的ajax异步请求接收返回json数据

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: $('#send').click(function () { $.ajax({ type : "GET", url : "a.php", dataType : "jsonp", success : function (data) { $.

jQuery $.ajax跨域-JSONP获取JSON数据（转载）

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该

获取json数据后在 地图上打点，根据 json不断移动点的位置

<?php echo <<<_END <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-

jquery的ajax和getJson跨域获取json数据

原文:http://www.cnblogs.com/yqskj/archive/2013/06/12/3133247.html 很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了.然后 正好就遇到了浏览器端跨域访问的问题. 跨域的安全限制都是指浏览器端来说的,服务器端不存

jquery通过ajax方法获取json数据不执行success

1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述3个标准写法:      1)键名称:用双引号括起:    2)字符串:用双引号括起:    3)数字,布尔值不需要使用双引号括起 : 注意:一定是双括号! 2.jQuery中ajax使用json数据类型总是跳过success

jQuery异步获取json数据的2种方式

jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: { "one" : "Hello", "two" : "World" } ■ 通过$.getJSON方法获取json数据 <script src="Scripts/jquery-2.1.1.min.js"

【转载1】jquery的ajax和getJson跨域获取json数据

目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端生成script tags至返回至客户端,也就是动态生成javascript标签,通过javascript callback的形式实现数据读取. html代码: 1 $(function(){ 2 3 $("#ww").click(function(){ 4 5 $.ajax({ 6 ty

jquery通过ajax方法获取json数据不执行success回调

问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述3个标准写法:      1)键名称:用双引号括起:    2)字符串:用双引号括起:    3)数字,布尔值不需要使用双引号括起 : 注意:一定是双括号!