Ré-encapsulation et fonctionnement simplifié d'ajax dans Jquery-js tutoriel-php.cn

Ré-encapsulation et fonctionnement simplifié d'ajax dans Jquery

不言

Libérer： 2018-07-02 16:18:10

original

1583 Les gens l'ont consulté

Cet article présente principalement la ré-encapsulation ajax dans Jquery et simplifie les exemples d'opérations. Les amis qui en ont besoin peuvent venir s'y référer. J'espère qu'il sera utile à tout le monde

<!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>

Copier après la connexion

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;
    }
}

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

JQuery utilise $.ajax et une case à cocher pour implémenter la prochaine fonction de notification d'absence

ajax pour implémenter la zone de saisie affichage du changement de texte Effet de la liste déroulante

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!