zoukankan      html  css  js  c++  java
  • jquery使用ajax

    前端jquery使用ajax的几种方法:

    $.ajax使用

        $.ajax({
                url:'/test_ajax',  #发送url
                data:{a:1,b:2,csrfmiddlewaretoken:'{{ csrf_token }}'},  #post方式在Django中需要使用令牌防止跨站请求伪造
                type:"post",     #请求方式,get, post...
                dataType:"text",   #返回的数据类型,text,json, xml...
                success:function(data){    #成功返回后调用的回调函数
                    alert(data)
                }
            })

    $.post使用

            $.post(
                '/test_ajax',  #url
                {a:1,b:2,csrfmiddlewaretoken:'{{ csrf_token }}'},  #令牌
                function(data){    #成功时的回调函数
                    alert(data)
                },
                'text'    #设置返回的数类型
            )

    jQuery 1.12 中 jQuery.post支持对象参数,具体的参数可以参考 $.ajax():现在某些版本并不适用

            $.post({
                url:'/test_ajax',
                data:{a:1,b:2,csrfmiddlewaretoken:'{{ csrf_token }}'},
                dataType:"text",
                success:function(data){
                    alert(data)
                }
            })

    $.get使用:(同post,不需要令牌)

        $.get(
                '/test_ajax',
                {a:1,b:2},
                function(data){
                    alert(data)
                },
                'text'
            )

    补充:

    $.getScript:即时加载--->通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

    jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。

    html代码:

    <input type="button" value="getscript" onclick="func();"/>
    <input type="button" value="say" onclick="say();"/>

    JavaScript代码:

        function func() {
            $.getScript("/static/test.js",function () {    #第一个参数为加载的文件,第二个为成功加载后回调函数
                alert("ok")
            })
        }

    test.js文件:

    function say(){
        alert("hello")
    }

    先点击getscript按钮加载文件,再点击say可以执行test.js中的函数

    $.getJSON使用

    html:

    <input type="button" value="getjson" onclick="func_json();"/>

    script:

        function func_json(){
            $.getJSON("/get_json",function (data) {    #请求url(也可以直接载入json静态资源文件),和成功载入后的回调函数
                alert(data.username)
            })
        }
       #补充:javascript中将字符串转json对象 JSON.parse()

    后台:

    url(r"^get_json",views.get_json)
    
    def get_json(req):
        data = {"username":"lsda","age":12}
        data = json.dumps(data)
        return HttpResponse(data)

    补充参数:statusCode

    $.ajax({
      statusCode: {404: function() {
        alert('page not found');
      }
    });

    服务端设置状态码:

    HttpResponse.status_code="404"

    更多请看:http://jquery.cuishifeng.cn/jQuery.Ajax.html官网

  • 相关阅读:
    e.srcElement和e.target使用例子
    转载:jQuery点击tr实现checkbox选中的方法
    html和css居中
    转载:JQuery Resizable详解
    转载:JS实现ArrayList类
    【55】运行至当前位置
    【58】使用‘数据提示’修改变量值
    虚拟机Vmware 7与XP Mode
    听小说 JS Hook
    【54】Visual studio Tip:创建一个带有条件的断点
  • 原文地址:https://www.cnblogs.com/ssyfj/p/8658729.html
Copyright © 2011-2022 走看看