jqueryはajax方式でバックグラウンドからjsonデータを取得した後、ドロップダウンリストにコンテンツを埋め込む方法
12356 ワード
問題についてはバックグラウンドからjsonデータを取得し、ドロップダウンリストに内容を入力します.コードは非常に簡単です.具体的な手順は、次のコードを参照してください.
需要:url:リンクpar:ID sel:ドロップダウンリストセレクタ
//ドロップダウンリストの取得
以上のコードは簡単でしょう.この問題はeasyの解決です.
Jquery Ajaxを使用してバックグラウンドから返される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('')
};
$(sel).prepend('')
});
}以上のコードは簡単でしょう.この問題はeasyの解決です.
Jquery Ajaxを使用してバックグラウンドから返されるJsonデータページの処理手順を取得
実装手順については、次のコード例を参照してください.
<script src="JS/jquery-1.8.0.min.js" type="text/javascript"/>
<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": "zhangsan@qq.com" };
//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>
</code></pre><ul id="list">
</ul>
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": "zhangsan@qq.com" };
//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>
-->
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;
}
}
}
<title/>
<script src="JS/jquery-1.8.0.min.js" type="text/javascript"/>
<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>
<form id="form1" runat="server">
<div>
<dropdownlist id="ddl1" runat="server" onchange="GetPara(this)">
</dropdownlist>
<ul id="list"/>
<input type="button" value=" " onclick="SavePara()"/>
</div>
</form>
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;
}
}
</paras></paras></div>
<p> ， 。</p>
<div class="clearfix">
<span id="art_bot" class="jbTestPos"/>
</div>
</div>
</div>
</div>