suchen

Heim >Web-Frontend >js-Tutorial >Neukapselung und vereinfachte Bedienung von Ajax in Jquery

Neukapselung und vereinfachte Bedienung von Ajax in Jquery

不言
不言Original
2018-07-02 16:18:101570Durchsuche

Dieser Artikel stellt hauptsächlich die Ajax-Neukapselung in Jquery vor und vereinfacht die Betriebsbeispiele. Freunde, die sie benötigen, können sich darauf beziehen. Ich hoffe, dass sie für alle hilfreich sind. 

<!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>jQueryAjaxJson取值示例</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            jsonAjax("AjaxQuery.aspx", "type=json", "json", callBack);
            jsonAjax("AjaxQuery.aspx", "id=1&name=2&type=text", "text", callBackTxt);
        });
        function callBack(data) {
            $("#ddd").html(&#39;&#39;);
            var json = eval(data); //数组  
            $.each(json, function (index, item) {
                //循环获取数据
                var name = json[index].Name;
                var age = json[index].Age;
                var sex = json[index].Sex;
                $("#ddd").html($("#ddd").html() + "<br>" + name + "  " + age + "  " + sex + "<br/>");
            });
        };
        function callBackTxt(data) {
            $("#ccc").html(data);
        };
        /**
        * ajax post提交
        * @param url
        * @param param
        * @param datat 为html,json,text
        * @param callback回调函数
        * @return
        */
        function jsonAjax(url, param, datat, callback) {
            $.ajax({
                type: "post",
                url: url,
                data: param,
                dataType: datat,
                success: callback,
                error: function () {
                    jQuery.fn.mBox({
                        message: &#39;恢复失败&#39;
                    });
                }
            });
        }
    </script>
</head>
<body>
    <span id="ccc"></span>
    <span id="ddd"></span>
</body>
</html>
using System;
//新增
using System.Web.Script.Serialization;
using System.Collections.Generic;
public partial class AjaxQuery : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //数据模拟,仅供参考
            string messgage = string.Empty;
            string id = Request["id"];
            string name = Request["name"];
            string gettype = Request["type"];
            if (gettype=="text")
            {
                messgage = (id == "1" && name == "2") ? "ok符合条件" : "sorry不符合条件";
            }
            else if (gettype == "json")
            {
                List<Student> list = new List<Student>();
                for (int i = 0; i < 50; i++)
                {
                    Student a = new Student();
                    a.Name = "张三" + i;
                    a.Age = i;
                    a.Sex = "男";
                    list.Add(a);
                }
                messgage = new JavaScriptSerializer().Serialize(list); 
            }
            else
            { }
            Response.Write(messgage);
            Response.End();
        }
    }
    public struct Student
    {
        public string Name;
        public int Age;
        public string Sex;
    }
}

Ich hoffe, dass der Inhalt des gesamten Artikels für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

JQuery verwendet $.ajax und ein Kontrollkästchen, um die nächste Abwesenheitsbenachrichtigungsfunktion zu implementieren

Ajax, um das Eingabefeld zu implementieren Textänderungsanzeige Wirkung der Dropdown-Liste

Das obige ist der detaillierte Inhalt vonNeukapselung und vereinfachte Bedienung von Ajax in Jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery ajax 封装 checkbox
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ajax implementiert den Effekt, den Text des Eingabefelds zu ändern, um die Dropdown-Liste anzuzeigenNächster Artikel：Ajax implementiert den Effekt, den Text des Eingabefelds zu ändern, um die Dropdown-Liste anzuzeigen

In Verbindung stehende Artikel

Mehr sehen