AJAX与json

最新推荐文章于 2023-05-02 17:28:00 发布

HiFerry

最新推荐文章于 2023-05-02 17:28:00 发布

阅读量235

点赞数 2

分类专栏： django 文章标签： ajax python

本文链接：https://blog.csdn.net/weixin_49722641/article/details/109846289

版权

django 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JSON
(JavaScript Object Notation)是一种轻量级数据交换，是用字符串来表示Javascript对象；
json字符串就是js对象的一种表现形式(字符串的形式)

	import json
	i=10
	s='hello'
	t=(1,4,6)
	l=[3,5,7]
	d={'name':"zzzfff"}
	json_str1=json.dumps(i) # '10'
	json_str2=json.dumps(s) # '"hello"'
	json_str3=json.dumps(t) # '[1, 4, 6]'
	json_str4=json.dumps(l) # '[3, 5, 7]'
	json_str5=json.dumps(d) # '{"name": "zzzfff"}'

这里面的json_str就是json字符串。
JSON字符串内的值：

	数字    （整数或浮点数）
	字符串  （在双引号中）
	逻辑值  （true 或 false）
	数组    （在方括号中）
	对象    （在花括号中，引号用双引）
	null

前端接受到json字符串，就可以通过JSON.parse()等方法解析成json对象(即js对象)直接使用了。
python与json对象的对应：

    python                    json
    dict                      object
    list,tuple                array
    str,unicode               string
    int,long,float            number
    True                      true
    False                     false
    None                      null

<script>
	var person = {"name":"zzz",
	              "sex":"w",
	              "teacher":{
	                 "name":"ycq",
	                 "sex":"m",
	              },
	              "bobby":['bbb','rrrr'],
	
	               "getName":function() {return 89;}
	              };
	alert(person.name);
	alert(person.getName());
	alert(person.teacher.name);
	alert(person.bobby[0]);
</script>

parse()和.stringify()
parse() 用于从一个json字符串中解析出json对象

	var str = '{"name":"zzz","age":"222"}';
	console.log(JSON.parse(str)) // Object {age: "222",name: "zzz"}

stringify()用于从一个json对象解析成json字符串，如

	var c= {a:1,b:2} 
	console.log(JSON.stringify(c)) # '{"a":1,"b":2}'

在浏览器f12控制台下输入。单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。

	a={name:"yuan"};   //ok
	b={'name':'yuan'}; //ok
	c={"name":"yuan"}; //ok
	
	alert(a.name);  //ok
	alert(a[name]); //undefined
	alert(a['name']) //ok

django向js发送数据

	def login(request):
	    obj={'name':"zzz"}
	    return render(request,'index.html',{"objs":json.dumps(obj)})
	# index.html
	 <script>
	     var temp={{objs|safe}}
	     alert(temp.name); // zzz
	     alert(temp['name']) // zzz
	 </script>

此外，还可以通过ajax技术使js接受django相应的json数据。

AJAX
AJAX(Asynchronous Javascript And XML)
异步Javascript和XML。即使用Javascript语言与服务器进行异步交互。
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个浏览器页面局部刷新；
（这一特点给用户的感受是在不知不觉中完成请求和响应过程）比如百度搜索框
js实现的局部刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    window.onload = function() {//当文档加载完毕时执行本函数
        var form = document.getElementById("form1");//获取表单元素对象
        form.onsubmit = function() {//给表单元素添加一个监听，监听表单被提交事件
            var usernameValue = form.username.value;//获取表单中名为username的表单元素值
            if(!usernameValue) {//判断该值是否为空
                var usernameSpan = document.getElementById("usernameSpan");//得到usernmae元素后的<span>元素
                usernameSpan.innerText = "用户名不能为空！";//设置span元素内容！
                return false;//返回false，表示拦截了表单提交动作
            }
            return true;//不拦截表单提交动作
        };
    };
    </script>
</head>
<body>
    <h1>注册页面</h1>
    <form action="" method="post" id="form1">
    用户名：<input type="text" name="username"/>
    <span id="usernameSpan"></span>
    <br/>
    密　码：<input type="password" name="password"/>
    <span id="passwordSpan"></span>
    <br/>
    <input type="submit" value="注册"/>
    </form>
</body>
</html>

AJAX的优缺点
优点：
AJAX使用Javascript技术向服务器发送异步请求；
AJAX无须刷新整个页面；因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；
缺点：
AJAX并不适合所有场景，很多时候还是要使用同步交互；
AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；
AJAX技术
四步操作：
创建核心对象 XMLHTTPRequest
var xmlHttp = new XMLHttpRequest()；
使用核心对象打开与服务器的连接；xmlHttp.open(" ") (请求方式, URL, 是否异步)
发送请求 xmlHttp.send(“name=zzz”) # 请求体的内容，如果为get，则send(null)
注册监听，监听服务器响应 xmlHttp.responseText()。

onreadystatechange，指定监听函数，它会在xmlHttp对象的状态发生变化时被调用
readyState，当前xmlHttp对象的状态，其中4状态表示服务器响应结束
status：服务器响应的状态码，只有服务器响应结束时才有，200表示响应成功；
responseText：获取服务器的响应体

所有的异步交互都是使用XMLHttpServlet对象完成的

	function createXMLHttpRequest() {
        var xmlHttp;
        // 适用于大多数浏览器，以及IE7和IE更高版本
        try{
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            // 适用于IE6
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                // 适用于IE5.5，以及IE更早版本
                try{
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){}
            }
        }            
        return xmlHttp;
    }

javascript中ajax使用
get请求

	# url
	urlpatterns = [
	    path('admin/', admin.site.urls),
	    path("index",views.index),
	    path("ajaxx/",views.ajax),
	]

	# VIEWS
	def index(req):
		return render(req,"index.html")
	def ajax(req):
		return HttpResponse("hello")

	//index.html文件
	<body>
	<button onclick="func1()">ajax提交</button>
	</body>
	<script>
	    function createXMLHttpRequest() {
	        var xmlHttp;
	        // 适用于大多数浏览器，以及IE7和IE更高版本
	        try{
	            xmlHttp = new XMLHttpRequest();
	        } catch (e) {
	            // 适用于IE6
	            try {
	                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
	            } catch (e) {
	                // 适用于IE5.5，以及IE更早版本
	                try{
	                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	                } catch (e){}
	            }
	        }
	        return xmlHttp;
	    }
	
	    function func1(){//绑定点击事件
	        var xmlHttp = createXMLHttpRequest();
	        xmlHttp.open("GET", "/ajaxx/", true);//打开与服务器的连接（open方法）
	        xmlHttp.send(null);//发送请求
	        xmlHttp.onreadystatechange=function(){//接收服务器响应
	            alert(xmlHttp.readyState);
	            if(xmlHttp.readyState==4 && xmlHttp.status==200) {//4：读取服务器响应结束。
	                var data = xmlHttp.responseText;
	                alert(data);
	            }
	        }
	    }
	</script>
	</html>

post请求

	def ajax(req):
		if req.method=="POST":
			print(req.POST)
		return HttpResponse("hello")

	 function func1(){//绑定点击事件
	    var xmlHttp = createXMLHttpRequest();
	     xmlHttp.open("POST", "/ajaxx/", true);//打开与服务器的连接（open方法）
	     xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//使得views中函数可正确打印
	     xmlHttp.send("name=zzz");//发送请求 不加上面一句 数据打印为空 <QueryDict: {}> 加了以后<QueryDict: {'name': ['zzz']}>
	     xmlHttp.onreadystatechange=function(){//接收服务器响应
	         alert(xmlHttp.status)
	         if(xmlHttp.readyState==4 && xmlHttp.status==200) {//4：读取服务器响应结束。
	             var data = xmlHttp.responseText;
	             alert(data);
	         }
	     }
	 }

AJAX实例（用户名已被注册）局部刷新

	<body>
	    <h1>注册</h1>
	    <form action="" method="post">
	    用户名：<input id="username" type="text" name="username" onblur="send()"/><span id="error"></span><br/>
	    密  码：<input type="text" name="password"/><br/>
	    <input type="submit" value="注册"/>
		</form>
		<script type="text/javascript">
		    function createXMLHttpRequest() {
		        try {
		            return new XMLHttpRequest();
		        } catch (e) {
		            try {
		                return new ActiveXObject("Msxml2.XMLHTTP");
		            } catch (e) {
		                return new ActiveXObject("Microsoft.XMLHTTP");
		            }
		        }
		    }
		    function send() {
		        var xmlHttp = createXMLHttpRequest();
		        xmlHttp.onreadystatechange = function() {
		            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
		                if(xmlHttp.responseText == "true") {
		                    document.getElementById("error").innerText = "用户名已被注册！";
		                    document.getElementById("error").textContent = "用户名已被注册！";
		                } else {
		                    document.getElementById("error").innerText = "";
		                    document.getElementById("error").textContent = "";
		                }
		            }
		        };
		        xmlHttp.open("POST", "/index/", true, "json");
		        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		        var username = document.getElementById("username").value;
		        xmlHttp.send("username=" + username);
		    }
		</script>
	</body>

	def index(req):
		if req.method=="POST":
			username = req.POST.get('username', None)
			if username == 'zzz':
				return HttpResponse('true')
			return HttpResponse('false')
		return render(req,"index.html")

jquery实现的ajax setting中注释csrf

	<body>
	<button onclick="func1()">ajax提交</button>
	<script src="/static/jquery-2.1.4.min.js"></script>
	<script>
	    function func1() {
	        Test()
	    }
	    function Test() {
	        //$.get("/index/?a=12")
	        //$.get("/index/",{a:12})
	        //$.post("/index/",{a:12}) //只有请求类型不同 form data
	        
	        //回调函数 data为执行完成后的返回值
	        //$.post("/index/",{a:12},function (data){
	        //    alert(data)
	        //})
	        //请求参数应该尽量放在data参数中，因为可以自动编码，手动拼接url要注意编码问题
	
	        //$.getScript('/static/test.js', function () {//js文件位置 使用AJAX请求，获取和运行 JavaScript:
	        //    alert(add(1, 6));
	        //});
	    }
	</script>
	</body>

test.js文件

  function add(a,b){
       return a+b
   }

$.ajax的两种写法：

	$.ajax("url",{})
	$.ajax({})

参数介绍
请求数据相关: data, processData, contentType, traditional
data: 当前ajax请求要携带的数据，是一个json的object对象，ajax方法会默认地把它编码成某种格式发送给服务端；默认以get方式发送请求。

	 function testData() {
	     $.ajax("/index/",{     // 此时的data是一个json形式的对象
	        type:"POST",
	        data:{
	            a:1,
	            b:2
	        }
	     });                  // <QueryDict: {'a': ['1'], 'b': ['2']}>
	 }

processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，那么对data：{a:1,b:2} 会调用json对象的toString()方法，即{a:1,b:2}.toString(),最后得到一个［object，Object］形式的结果。该属性的意义在于，当data是一个dom结构或者xml数据时，希望数据不要进行处理，直接发过去，就可以将其设为true。

contentType：默认值: application/x-www-form-urlencoded。发送信息至服务器时内容编码类型。用来指明当前请求的数据编码格式；

	function testData(){
        $.ajax("/index/",{
            data:JSON.stringify({
                a:22,
                b:33
            }),
            contentType:"application/json",
            type:"POST",
       }); //{a: 22, b: 33}
	}

contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象
traditional：一般data数据有数组时会用到：data:{a:22,b:33,c:[“x”,“y”]}，traditional为false会对数据进行深层次迭代；

响应数据: dataType、dataFilter
dataType：预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。默认不需要显性指定这个属性，ajax会根据服务器返回的content Type来进行转换；比如服务器响应的content Type为json格式，这时ajax方法就会对响应的内容进行一个json格式的转换，如果转换成功，在success的回调函数里就会得到一个json格式的对象；转换失败就会触发error这个回调函数。dataType的可用值：html｜xml｜json｜text｜script

<body>
<button onclick="testData()">ajax提交</button>
</body>
<script>
    function testData(){
        $.ajax("/index/",{
            data:JSON.stringify({
                a:22,
                b:33
            }),
            type:"POST",
            dataType:"json",
            success:function (data) {
               console.log(data)//成功了执行
            },
            error:function (data) {
               console.log(data)//失败了执行
            },
       });
    }
</script>

	def index(req):
		if req.method=='GET':
			return render(req, "sss.html")
		else:
			print(req.POST) # <QueryDict: {'{"a":22,"b":33}': ['']}>
			return HttpResponse('"hh"')

dataFilter:function 给 Ajax返回的原始数据的进行预处理的函数。

请求类型 type：
String 默认值: “GET”。请求方式 (“POST” 或 “GET”)，默认为 “GET”。

HiFerry

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
AJAX与json

JSON(JavaScript Object Notation)是一种轻量级数据交换，是用字符串来表示Javascript对象；json字符串就是js对象的一种表现形式(字符串的形式) import json i=10 s='hello' t=(1,4,6) l=[3,5,7] d={'name':"zzzfff"} json_str1=json.dumps(i) # '10' json_str2=json.dumps(s) # '"hello"' json_str3=json.dum
复制链接

扫一扫