zoukankan      html  css  js  c++  java
  • 关于AJAX+HTML5+ASHX进行全静态页面的数据交互

    及时总结项目中使用到的知识,知识在于积累。

    1.HTML代码

    <!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.7.1.min.js"" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    $('#btnTest').click(function(){
    var html = "";
    $.ajax({
    type: "post",
    url: "dataHandle.ashx",
    data: {id:$("#txtID").val()},
    dataType: "json",
    success: function(data){
    if (data.student[0].name != '') {
    //$('#divinfo').text(data.student[0].name);
    html += '<br><div class="comment">你要找的人:';
    $.each(data.student, function(commentIndex, comment){
    html += '<h3>' + comment['name']
    + '</h6></div>';
    });

    $('#divinfo').html(html);
    }
    else {
    $('#divinfo').text("error");
    }
    }
    });
    });
    });
    </script>
    </head>
    <body>
    编号:<input id="txtID" type="text" /><br />
    <input id="btnTest" type="button" value="找人" /><br />
    <div id="divinfo"></div>
    </body>
    </html>

    2.ashx代码

    public void ProcessRequest(HttpContext context)
    {
    context.Response.ContentType = "json";
    string id = context.Request["id"];
    DataSet ds = new DataSet();
    using (DataTable dt = new DataTable("students"))
    {
    //创建列
    DataColumn dtc = new DataColumn("name", typeof (string));
    dt.Columns.Add(dtc);

    dtc = new DataColumn("sex", typeof (string));
    dt.Columns.Add(dtc);

    dtc = new DataColumn("tel", typeof (Int32));
    dt.Columns.Add(dtc);

    //添加数据到DataTable
    DataRow dr = dt.NewRow();
    if (id == "0")
    {
    dr["name"] = "张三";
    dr["sex"] = "男";
    dr["tel"] = 54531;
    dt.Rows.Add(dr);
    dr = dt.NewRow();
    dr["name"] = "李四";
    dr["sex"] = "男";
    dr["tel"] = 5731;
    dt.Rows.Add(dr);
    }
    if (id == "1")
    {
    dr = dt.NewRow();
    dr["name"] = "李四";
    dr["sex"] = "男";
    dr["tel"] = 5731;
    dt.Rows.Add(dr);
    }
    if (id == "2")
    {
    dr = dt.NewRow();

    dr["name"] = "王五";
    dr["sex"] = "女";
    dr["tel"] = 5868451;
    dt.Rows.Add(dr);
    }
    ds.Tables.Add(dt);
    }
    string jsonTable = "student";
    string strRe = TableToJson(ds.Tables[0], jsonTable);
    context.Response.Write(strRe);

    }

    public string TableToJson(DataTable dt, string jsonName)
    {
    var jsonBuilder = new StringBuilder();
    jsonBuilder.Append("{"");
    //jsonBuilder.Append(dt.TableName.ToString());
    jsonBuilder.Append(jsonName + "":");
    jsonBuilder.Append("[");
    for (int i = 0; i < dt.Rows.Count; i++)
    {
    jsonBuilder.Append("{");
    for (int j = 0; j < dt.Columns.Count; j++)
    {
    jsonBuilder.Append(""");
    jsonBuilder.Append(dt.Columns[j].ColumnName);
    jsonBuilder.Append("":"");
    jsonBuilder.Append(dt.Rows[i][j].ToString());
    jsonBuilder.Append("",");
    }
    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
    jsonBuilder.Append("},");
    }
    if (dt.Rows.Count > 0)//表示有数据,则需要删除最后的一个 ,
    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
    jsonBuilder.Append("]");
    jsonBuilder.Append("}");
    return jsonBuilder.ToString();
    }

  • 相关阅读:
    python通过帐号和密码访问mysql
    pyqt5简单登陆界面
    PyQt5点击按钮产生新窗体
    ubuntu访问win10下的磁盘
    python平均值和加权平均值
    牛顿迭代法求高次方程的根
    运用模逆运算(同余方程)来解决Matlab课上的一道思考题
    线程实现方式与临界区保护
    线程调度的问题:Lock Convoy(锁封护)与Priority Inversion(优先级反转)
    C++ lvalue,prvalue,xvalue,glvalue和rvalue详解(from cppreference)
  • 原文地址:https://www.cnblogs.com/NetPig/p/3912363.html
Copyright © 2011-2022 走看看