zoukankan      html  css  js  c++  java
  • ASP.net通过JQuery实现Ajax操作

    最近要用到ajax,可是.net自带那个速度实在太慢了。。。于是学了JQuery

    这东西真的不错。。拿起jquery手册直接就能写。。。很容易上手。。在网上找了一个jquery实例。。。

    再在里面测试了  几个不同的返回数据后面最多的反回Json数据。。当然我只是才学没多久。。知道这些够用了。。

    下面是index.aspx的代码,当然也可以直接存成.html页也一样的。。

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

    <!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 id="Head1" runat="server">
    <title>JSON练习</title>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <!--引用 jquery类库-->
    <script type="text/javascript">
    $(
    function() {
    $(
    "#bt1").click(function() {
    $.ajax({
    url:
    "Default.aspx?id=1",
    type:
    "get",
    dataType:
    'json',
    cache:
    false,
    beforeSend:
    function(result) {
    },
    success:
    function(result) {
    var html = '';
    $(result).each(
    function(i) //解析方法1
    {
    html
    += i + "---" + this.name + ":" + this.value + "\n";
    alert(i
    + "---" + this.name + ":" + this.value);
    });
    alert(html);
    },
    error:
    function(result, status) {
    if (status == 'error') {
    alert(
    "系统发生错误");
    }
    }
    });
    });
    $(
    "#bt2").click(function() {
    $.ajax({
    url:
    "Default.aspx?pid=2",
    type:
    "get",
    dataType:
    'json',
    cache:
    false,
    beforeSend:
    function(result) {
    },
    success:
    function(result) {
    alert(result.name);
    alert(result.value);
    alert(result.name
    + ":" + result.value);
    },
    error:
    function(result, status) {
    if (status == 'error') {
    alert(
    "系统发生错误");
    }
    }
    });
    });
    $(
    "#bt3").click(function() {
    $.ajax({
    url:
    "Default.aspx?id=1",
    type:
    "get",
    dataType:
    'json',
    cache:
    false,
    beforeSend:
    function(result) {
    },
    success:
    function(result) {
    var html = '';
    $.each(result,
    function(i, comment) //解析方法2
    {
    html
    += i + "---" + comment['name'] + ":" + comment['value'] + "\n";
    alert(i
    + "---" + comment['name'] + ":" + comment['value']);
    });
    alert(html);
    },
    error:
    function(result, status) {
    if (status == 'error') {
    alert(
    "系统发生错误");
    }
    }
    });
    });



    //=====================================================自己加的=================================================================================
    //Jquery 通过Post实现ajax
    $("#zw").click(function() {
    $.post(
    "default.aspx?zw=Ajax_post",
    { text1: escape($(
    "#text1").val()), text2: escape($("#text2").val()) },
    function(data) {
    alert(data);
    }
    );
    });

    //Jquery 通过ajax实现ajax
    $("#zw2").click(function() {
    $.ajax({
    url:
    "default.aspx?a=ajax",
    type:
    "get",
    dataType:
    "text",
    success:
    function(d) { alert(d); }
    });

    })

    //Jquery 通过json实现ajax=========Ajax_json一维(方法一)
    $("#zw3").click(function() {
    $.ajax({
    url:
    "default.aspx?a=json",
    //type: "get",
    dataType: "json",
    cache:
    false, //不进行缓存
    success: function(result) {
    var html = '';
    $(result).each(
    function(i) //解析方法1
    {
    html
    += i + "---" + this.value + "\n";
    alert(i
    + "---" + this.value);
    });
    alert(html);
    }
    });
    })
    //Jquery 通过json实现ajax===============Ajax_json一维(方法二)
    $("#zw4").click(function() {
    $.ajax({
    url:
    "default.aspx?a=json",
    //type: "get",
    dataType: "json",
    cache:
    false, //不进行缓存
    success: function(result) {
    var html = '';
    $.each(result,
    function(i,d) //解析方法2
    {
    html
    += i + "---" + d['value'] + "\n";
    alert(i
    + "---" + d['value']);
    });
    alert(html);
    }
    });
    })


    //Jquery 通过json实现ajax===============Ajax_json二维(方法一)
    $("#zw5").click(function() {
    $.ajax({
    url:
    "default.aspx?a=json222",
    //type: "get",
    dataType: "json",
    cache:
    false, //不进行缓存
    success: function(result) {
    var html = '';
    $(result).each(
    function(i) //解析方法1
    {
    html
    += "Line" + i + "===" + this.name1 + "--" + this.name2 + "\n";
    alert(
    "Line" + i + "===" + this.name1 + "--" + this.name2);
    });
    alert(html);
    }
    });
    })

    //Jquery 通过json实现ajax===============Ajax_json二维(方法二)
    $("#zw6").click(function() {
    $.ajax({
    url:
    "default.aspx?a=json222",
    //type: "get",
    dataType: "json",
    cache:
    false, //不进行缓存
    success: function(result) {
    var html = '';
    $.each(result,
    function(i, comment) //解析方法2
    {
    html
    += "Line" + i + "===" + comment['name1'] + "--" + comment['name2'] + "\n";
    alert(
    "Line" + i + "===" + comment['name1'] + "--" + comment['name2']);
    });
    alert(html);
    }
    });
    })


    $(
    "#zw7").click(function() {
    $.ajax({
    url:
    "Default.aspx?a=json333",
    type:
    "get",
    dataType:
    'json',
    cache:
    false,
    beforeSend:
    function(result) {
    },
    success:
    function(result) {
    alert(result.name1);
    alert(result.name2);
    alert(result.name3);
    },
    error:
    function(result, status) {
    if (status == 'error') {
    alert(
    "系统发生错误");
    }
    }
    });
    });


    });





    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <input type="text" id="text1" value="111" />
    <input type="text" id="text2" value="222" />
    <br /><input id="bt1" type="button" value="点击返回json集合" />
    <br /><input id="bt2" type="button" value="点击返回一个json字符串" />
    <br /><input id="bt3" type="button" value="点击返回json集合(解析方法不一样)" />
    <br /><br /><input id="zw" type="button" value="Ajax_post" />
    <br /><input id="zw2" type="button" value="Ajax_ajax" />

    <br /><br /><input id="zw3" type="button" value="Ajax_json一维(方法一)" />
    <br /><input id="zw4" type="button" value="Ajax_json一维(方法二)" />

    <br /><br /><input id="zw5" type="button" value="Ajax_json二维(方法一)" />
    <br /><input id="zw6" type="button" value="Ajax_json二维(方法二)" />

    <br /><br /><input id="zw7" type="button" value="Ajax_json只有一条" />

    </div>
    </form>
    </body>
    </html>

    下面是提交ajax处理页我放在index.aspx.cs里面,我是测试所以直接放这页了。。

    1 using System;
    2  using System.Data;
    3  using System.Configuration;
    4  using System.Collections;
    5  using System.Web;
    6  using System.Web.Security;
    7  using System.Web.UI;
    8 using System.Web.UI.WebControls;
    9 using System.Web.UI.WebControls.WebParts;
    10 using System.Web.UI.HtmlControls;
    11 using System.Text;
    12 using System.Data.SqlClient;
    13
    14 public partial class Text_Default : System.Web.UI.Page
    15 {
    16 protected void Page_Load(object sender, EventArgs e)
    17 {
    18 if (!IsPostBack)
    19 {
    20 if (Request.QueryString["id"] != null)
    21 {
    22 StringBuilder str = new StringBuilder();
    23 for (int i = 0; i < 4; i++)
    24 {
    25 str.AppendFormat("{{\"name\":\"{0}\",\"value\":\"{1}\"}},", "ssss" + i.ToString(), i.ToString());
    26 }
    27 Response.Write("[" + str.ToString().TrimEnd(',') + "]"); //去掉最后的 ','返回一个json字符串
    28 Response.End();
    29 }
    30 if (Request.QueryString["pid"] != null)
    31 {
    32 StringBuilder str = new StringBuilder();
    33 str.AppendFormat("{{\"name\":\"{0}\",\"value\":\"{1}\"}}", "ssss5", "5");
    34 Response.Write(str.ToString());
    35 Response.End();
    36 }
    37
    38
    39 //Jquery 通过Post实现ajax
    40 if (Request.QueryString["zw"] != null)
    41 {
    42 StringBuilder str = new StringBuilder();
    43 if (Request.Form["text1"] != null) { str.Append("\nBtext1=" + Request.Form["text1"]); }
    44 if (Request.Form["text2"] != null) { str.Append("\nBtext2=" + Request.Form["text2"]); }
    45 for (int i = 0; i < 5; i++)
    46 {
    47 str.Append("\n" + Request.QueryString["zw"] + "=" + i);
    48 }
    49 str.Append("\n时间:"+DateTime.Now.ToString());
    50 Response.Write(str.ToString());
    51 Response.End();
    52 }
    53
    54 //Jquery 通过ajax实现ajax
    55 if (Request.QueryString["a"] =="ajax")
    56 {
    57 StringBuilder str = new StringBuilder();
    58
    59 str.AppendFormat("{{name:\"{0}\",value:\"{1}\"}}", "ajax", "5");
    60
    61 str.Append("\n时间:" + DateTime.Now.ToString());
    62 Response.Write(str.ToString());
    63 Response.End();
    64 }
    65
    66
    67 //Jquery 通过ajax实现ajax =====一维
    68 if (Request.QueryString["a"] =="json")
    69 {
    70 StringBuilder str = new StringBuilder();
    71
    72 for (int i = 0; i < 3; i++)
    73 {
    74 str.AppendFormat("{{\"value\":\"{0}\"}},", "N" + i.ToString());
    75 }
    76
    77 //str.Append("\n时间:" + DateTime.Now.ToString());
    78 Response.Write("[" + str.ToString().TrimEnd(',') + "]"); //去掉最后的 ','返回一个json字符串
    79 Response.End();
    80 }
    81
    82
    83 //Jquery 通过ajax实现ajax222 ========二维
    84 if (Request.QueryString["a"] == "json222")
    85 {
    86 StringBuilder str = new StringBuilder();
    87
    88 for (int i = 0; i < 3; i++)
    89 {
    90 str.AppendFormat("{{\"name1\":\"{0}\",\"name2\":\"{1}\"}},", "Name1:" + i.ToString(), "Name2:" + i.ToString());
    91 }
    92
    93 //str.Append("\n时间:" + DateTime.Now.ToString());
    94 Response.Write("[" + str.ToString().TrimEnd(',') + "]"); //去掉最后的 ','返回一个json字符串
    95 Response.End();
    96 }
    97
    98 //Jquery 通过ajax实现ajax3333 ========一条一维
    99 if (Request.QueryString["a"] == "json333")
    100 {
    101 StringBuilder str = new StringBuilder();
    102
    103 str.AppendFormat("\"name1\":\"{0}\",", "Name1:" + "1");
    104
    105 str.AppendFormat("\"name2\":\"{0}\",", "Name2:" + "2");
    106
    107 str.AppendFormat("\"name3\":\"{0}\",", "Name3:" + "3");
    108
    109
    110 //str.Append("\n时间:" + DateTime.Now.ToString());
    111 Response.Write("{" + str.ToString().TrimEnd(',') + "}"); //去掉最后的 ','返回一个json字符串
    112 Response.End();
    113 }
    114
    115
    116 //JScript.Alert(tt1.Value);
    117 }
    118 }
    119
    120 //连接数据库。用数据库的内容填充。
    121 //private string GetDepotjson()
    122 //{
    123 // StringBuilder jsonstr = new StringBuilder();
    124
    125 // SqlDataReader dr = bd.GetList(""); //读取数据库,返回SqlDataReader
    126 // while (dr.Read())
    127 // {
    128 // jsonstr.AppendFormat("{{name:\"{0}\",value:\"{1}\"}},", dr["Tname"], dr["TID"]);
    129 // }
    130 // dr.Close(); //关闭
    131 // return "[" + jsonstr.ToString().TrimEnd(',') + "]"; //返回一个json字符串
    132 //}
    133
    134
    135
    136 }

    代码下载https://files.cnblogs.com/q149072205/AjaxTest.rar



    欢迎加入JAVA技术交流QQ群:179945282

    欢迎加入ASP.NET(C#)交流QQ群:17534377


  • 相关阅读:
    [Oracle工程师手记]Linux环境中,反复调用SQLPLUS 执行SQL语句的例子
    [Oracle工程师手记] 记一次 transport lag 的解析
    [Oracle工程师手记] V$ARCHIVE_GAP中的 GAP 何时产生?
    [Oracle 工程师手记] nologging 操作的优先级
    [Oracle 工程师手记] ORA-16642: DB_UNIQUE_NAME mismatch 的解决过程
    [Oracle 工程师手记] 如何构造数据库的 log on trigger
    Groovy调用MD5加密
    Jenkins Pipeline调用 httpRequest插件提交Http请求
    Python调用Jenkins接口批准/拒绝Pipeline流程
    Access 的top和order by 的问题
  • 原文地址:https://www.cnblogs.com/q149072205/p/2023715.html
Copyright © 2011-2022 走看看