首页 > Web开发 > 详细

Ajax-06 Ajax数据交换格式

时间:2017-04-07 20:11:46      阅读:223      评论:0      收藏:0      [点我收藏+]

1.数据交换格式

  服务端返回的数据,在本质上都是字符串,只是原生Ajax 或jQuery Ajax将这些字符串转换为容易理解的各种常用格式。

a. Text

  文本字符串

b.  XML

  JavaScript中特殊的对象

c. JSON

  JavaScript中JSON值数组、字典

d. Script

  通过eval将字符串当做javaScript代码执行 eval("alert(123);")

 

2.原生Ajax

 text:

  xhr.responseText

xml:

  xhr.responseXML

json:

  JSON.parse(xhr.responseText)

script:

  eval(xhr.responseText)

3.jQuery Ajax

 text:

  dataType:‘text‘

xml:

  dataType:‘xml‘

json:

  dataType:‘json‘

script:

  dataType:‘script‘

 

jQuery Ajax 四种格式转换实例

url.py

from django.conf.urls import url
from hello import views

urlpatterns = [
    url(rresp_type/, views.resp_type, name=resp_type),
    url(rresp_text/, views.resp_text, name=resp_text),
    url(rresp_xml/, views.resp_xml, name=resp_xml),
    url(rresp_json/, views.resp_json, name=resp_json),
    url(rresp_script/, views.resp_script, name=resp_script),

]

views.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from django.http import HttpResponse
from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt


def resp_type(request):
    return render(request, resp_type.html)


@csrf_exempt
def resp_text(request):
    content = "Hello World!"
    return HttpResponse(content)


@csrf_exempt
def resp_xml(request):
    content = """
        <note>
            <to>George</to>
            <from>John</from>
            <heading>Reminder</heading>
            <body>Don‘t forget the meeting!</body>
        </note>
    """
    # 默认响应内容是 text/html;charset=utf-8
    response = HttpResponse(content, content_type=application/xml;charset=utf-8)
    response.status_code = 200
    return response


@csrf_exempt
def resp_json(request):
    content = {"name":"Milton","age":18}
    return HttpResponse(content)


@csrf_exempt
def resp_script(request):
    content = "alert(123);"
    return HttpResponse(content)

resp_type.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax数据交换格式</title>
</head>
<body>

<h1>jQuery-Ajax数据交换格式</h1>
<input type="button" onclick="RespText();" value="响应text字符串">
<input type="button" onclick="RespXml();" value="响应xml字符串">
<input type="button" onclick="RespJson();" value="响应json字符串">
<input type="button" onclick="RespScript();" value="响应script字符串">

<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    function RespText() {
        $.ajax({
            url: {% url resp_text %},
            dataType: text,
            success: function (data, statusText, xmlHttpRequest) {
                console.log(data);
            }
        });
    }

    function RespXml() {
        $.ajax({
            url: {% url resp_xml %},
            dataType: xml,
            success: function (data, statusText, xmlHttpRequest) {
                console.log(data);
            },
            error: function (xmlHttpRequest, statusText, errorThrown) {
                console.log(statusText);
            }
        });
    }

    function RespJson() {
        $.ajax({
            url: {% url resp_json %},
            dataType: json,
            success: function (data, statusText, xmlHttpRequest) {
                console.log(data);
            }
        });
    }

    function RespScript() {
        $.ajax({
            url: {% url resp_script %},
            dataType: script,
            success: function (data, statusText, xmlHttpRequest) {
                console.log(data);
            }
        });
    }
</script>
</body>
</html>

测试结果:

技术分享

 

Ajax-06 Ajax数据交换格式

原文:http://www.cnblogs.com/guanfuchang/p/6645881.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!