AJAX请求提交数据

1,AJAX准备知识:JSON

JSON指的是JavaScript对象表示方法(JavaScript Object Notation)

JSON是轻量级的文本数据交换格式

JSON独立于语言

JSON具有自我描述性, 更易理解

JSON使用JavaScript语法来描述数据对象,但是JSon仍然独立于语言和平台,json解析器和json库支持许多不同的语言

合格的json对象:

["雪雪","小雪","雪儿","小雪砸","雪人"]
{"雪雪":1,"小雪":2,"雪人":3,"雪儿":4,"小雪砸":5}
{"name":["雪雪","小雪"]}
{{"name":"雪雪","name":"小雪"}}

不合格的json对象:

{name:"雪雪","age":29}  # 属性名必须使用双引号
[29,26,28,0xFFF]  # 不能使用十六进制
{"name":"雪雪","name":undefined}  # 不能使用undefined
{"name":"雪雪",
"birthday":new Date(日期),
"getName": function(){return this name;}  # 不能使用日期和函数对象
}        

2,stringify和parse方法

JavaScript中关于JSON对象和字符串转换的两个方法:

JSON.parse():将用于一个JSON字符串转化为JavaScript对象

JSON.parse("{"name":"雪雪"}");
JSON.parse("{name:"雪雪"}");  // 错误
JSON.parse("{29,undefined}");  // 错误

JSON.stringfy():用于将JavaScript值转化为JSON字符串

JSON.stringfy({"name":"雪雪"})

3,和XML比较

JSON格式于2001年由Douglas Crockford提出,目的就是取代繁琐笨重的XML格式.

JSON格式有两个显著的优点:书写简单,一目了然;符合JavaScript原生语法,可以由解释引擎 直接处理,不用添加解析代码,所以,JSON迅速被接受,已经成为各大网站交换的标准的格式,并被写入ECMAScript5,成为标准的一部分

XML和JSON都使用结构化时间来标记数据,下面来做一个简单的比较

用XML表示额数据如下:

<?xml version="1.0" encoding="utf-8"?>
<country>
    <name>中国</name>
    <province>
        <name>黑龙江</name>
        <cities>
            <city>哈尔滨</city>
            <city>大庆</city>
        </cities>
    </province>
    <province>
        <name>广东</name>
        <cities>
            <city>广州</city>
            <city>深圳</city>
            <city>珠海</city>
        </cities>
    </province>
    <province>
        <name>台湾</name>
        <cities>
            <city>台北</city>
            <city>高雄</city>
        </cities>
    </province>
    <province>
        <name>新疆</name>
        <cities>
            <city>乌鲁木齐</city>
        </cities>
    </province>
</country>

XML表示中国的省份

用JSON表示如下:

{
    "name": "中国",
    "province": [{
        "name": "黑龙江",
        "cities": {
            "city": ["哈尔滨", "大庆"]
        }
    }, {
        "name": "广东",
        "cities": {
            "city": ["广州", "深圳", "珠海"]
        }
    }, {
        "name": "台湾",
        "cities": {
            "city": ["台北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["乌鲁木齐"]
        }
    }]
}

由上端的两段代码可以看出,JSON简单的语法格式和清晰的层次结构明显要比XML容易阅读,并且在数据交换方面,由于JSON所使用的字符要比XML少的多,可以大大的节约传输数据所占用的带宽

4,AJAX简介

AJAX(Asynchronous JavaScript And XML)翻译成中文就是"异步的JavaScript和XML".即使使用JavaScript与服务器进行异步交流, 传输的数据为XML(当然,传输的数据不只是XML).

AJAX不是新的编程语言,而是一种使用现有标准的新方法.

AJAX最大的优点是在重新不加载页面的情况下,可以于服务器交换数据并更新部分网页内容,(这一特点给用户的感受是在不知不觉中完成请求和访问的过程)

AJAX不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行

  1>同步交互:客户端法一个请求后,需要等待服务器响应结束后,才能发出第二个请求

  2>异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求.

通过AJAX传输数据到后端代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>实现字符串的拼接</title>
</head>
<body>
<h1>AJAX的请求响应方式</h1>
{#<input type="text" name="n1">+#}
{#<input type="text" name="n2">=#}
{#<input type="text" name="n3">#}
{#<input type="submit" id="b1">#}
<hr>

<input type="text" name="ii1">+
<input type="text" name="ii2">=
<input type="text" name="ii3">
<input type="submit" id="b2">
<input type="submit" id="b3" value="测试参数">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
{#  第一版,简单的ajax提交代码  #}
{#    $("#b1").click(function ()  {          {# 给比这个提交按钮绑定点击事件 #}
{#        $.ajax({                            {# 固定写法,声明是ajax提交数据 #}
{#            url: "/home/",                  {# 写明要移交数据的地址,如果是本网站跳转就写相对路径,如果是跨站就写绝对路径 #}
{#            type: "post",                   {# 提交数据的类型是post请求, #}
{#            data: {                         {# 要提交的所有数据都放在data中 #}
{#                n1: $("[name=‘n1‘]").val(), {# 获取到用户第一个输入框的内容 #}
{#                n2: $("[name=‘n2‘]").val()  {# 获取到用户第二个输入框的内容 #}
{#            },#}
{#            success: function (res) {      {# success表示接受服务器发过来的处理后的数据,括号要加参数 #}
{#                console.log(res);#}
{#                $(‘[name="n3"]‘).val(res);   {# 把接受到处理后的数据填入到第三个输入框中,交给浏览器渲染 #}
{#            }#}
{#        })#}
{#    });#}
{# 第二版证明每个提交事件是异步的 #}
{#    $("#b2").click(function () {                {# 异步处理,每一个是一个单独的提交时间 #}
{#        $.ajax({#}
{#            url: "/index/",#}
{#            type: "post",#}
{#            data: {#}
{#                nn1: $("[name=‘ii1‘]").val(),#}
{#                nn2: $("[name=‘ii2‘]").val()#}
{#            },#}
{#            success: function (res) {#}
{#                console.log(res);#}
{#                $("[name=‘ii3‘]").val(res);#}
{#            }#}
{#        })#}
{#    });#}

{# AJAX提交数据可以是序列化的字符串 #}

    $("#b3").click(function () {                             {# 给b3按钮绑定点击事件 #}
        $.ajax({                                              {# 指定ajax提交数据 #}
            url: "/ajax_test/",                               {# 指定提交的地址 #}
            type: "post",                                     {# 指定提价哦数据的类型 #}

            data: {                                           {# 要提交的数据 #}
                name:"雪雪",
                age:"29",
                hobby:JSON.stringify(["我","购物","看电影"])   {# 提交非字符串类型的数据结构需要stringfy序列化 #}
            },
            success: function (res) {                         {# 接收数据处理后返回的response对象 #}
                console.log(res);
                $("[name=‘ii3‘]").val(res);                    {# 把接收到的数据通过形参res接收到添加到结果框中 #}
            },
            error: function (ret) {                            {# 当视图函数中有错误的时候会走这个error的函数 #}
                console.log(ret);
                console.log("这是错误的")
            }
        })
    })
</script>
</body>
</html>    

这是视图函数的代码:

from django.shortcuts import render, HttpResponse
import json
# Create your views here.
from django.http import JsonResponse

# def home(request):
#     # 第二次进来,要获取用户输入的值
#     if request.method == "POST":
#         n1 = request.POST.get("n1")
#         n2 = request.POST.get("n2")
#         # 获取到数据后做拼接
#         n3 = n1 + n2
#         # 把处理后的数据发送给前端并渲染
#         return HttpResponse(n3)
#     # 第一次进来是GET请求,返回给用于一个页面
#     return render(request, "home.html")

#
# def index(request):
#     # 第二次进来是post提交的请求
#     if request.method == "POST":
#         # 获取用户输入的值
#         nn1 = request.POST.get("nn1")
#         nn2 = request.POST.get("nn2")
#         nn3 = nn1 + nn2
#         # 把获取到的值发送给浏览器已经渲染了的页面的对应的地方
#         return HttpResponse(nn3)
#     # 第一次进来是GET请求,返回给用于一个网页
#     return render(request, "home.html")

def ajax_test(request):
    print(123)
    if request.method == "POST":
        # 获取数据
        # 提交过来的数据是字符串类型需要反序列化
        print(request.POST.get("data"))
        data_dict1 = request.POST.get("name")
        data_dict2 = request.POST.get("age")
        data_dict3 = request.POST.get("hobby")
        print("name:",data_dict1,type(data_dict1))
        print("age:",data_dict2,type(data_dict2))
        print("hobby:",data_dict3,type(data_dict3))
        # msg1 = json.loads(data_dict1)
        # msg2 = json.loads(data_dict2)
        msg3 = json.loads(data_dict3)
        # print(msg1)
        # print(msg2)
        print(msg3[0])
        print(msg3[1])
        print(msg3[2])
    #     print(data_dict3[0])
    #     print(data_dict3[1])
    #     print(data_dict3[2])
    # print(789)
    # return HttpResponse("ok")
        ret = {"status":200,"mag":"ok"}
        int("ajgdh")
        return JsonResponse(ret)
    return render(request, "home.html")

5,AJAX常见应用场景

  搜索引擎根据用户输入的关键字,自动提示检索关键字.还有一个很重要的应用场景就是注册时候的用户名查重.其实这里就使用了AJAX技术!当文件框发生变化时,使用AJAX技术向服务器发送一个请求,然后服务器会把查询到的结果响应给浏览器,最后再把后端返回的结果展示出来

  • 整个过程中页面没有刷新,只是刷新页面中的局部位置而已!
  • 当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!

当用户输入同户名时,把光标移动到其他表单时,浏览器会使用AJAX技术向服务器发出请求,服务器会查询名为lemontree7777777的用户是否存在,最终服务器返回true表示名为lemontree7777777用户已经存在了,浏览器在得到结果显示"用户名已经被注册"

  • 整个过程中页面没有刷新,只是局部刷新了
  • 在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作

7,AJAX的优缺点:

优点:

  • AJAX使用JavaScript技术向服务器发送异步请求;
  • AJAX请求无须刷新整个页面
  • 因为服务器响应内容不在是整个页面,而是页面中的部分内容,所以AJAX性能高

缺点:

  • 破坏浏览器后退按钮的正常行为,在动态更新页面的情况下,用户无法回到前一个页面.
  • 使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中
  • 进行AJAX开发时,网络延迟---->即用户发出请求到服务器到服务器发出响应之间的时间间隔.

8,AJAX请求如何设置csrf_token

放法1:通过隐藏的input标签中的csrfmiddlewaretoken值,放在data中发送

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>实现字符串的拼接</title>
</head>
<h1>AJAX的请求响应方式</h1>
<input type="text" name="ii1">+
<input type="text" name="ii2">=
<input type="text" name="ii3">
<input type="submit" id="b2">
{#<input type="submit" id="b3" value="测试参数">#}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    $("#b2").click(function () {
        $.ajax({
            url: "/home/",
            type: "POST",
            data: {
                ii1: $("[name=‘ii1‘]").val(),
                ii2: $("[name=‘ii2‘]").val(),
                csrfmiddlewaretoken: $("[name=‘csrfmiddlewaretoken‘]").val()  // 使用jQuery取出csrfmiddlewaretoken的值,拼接到data中
            },
            success: function (res) {
                console.log(res);
                $("[name=‘ii3‘]").val(res)
            }
        })
    })
</script>
</body>
</html>

方法2:通过获取返回的cookie中的字符串放置在请求头中发送.注意:需要引入一个jQuery.cookie.js插件

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>实现字符串的拼接</title>
</head>
<body>
<h1>AJAX的请求响应方式</h1>
<hr>
{% csrf_token %}
<input type="text" name="ii1">+
<input type="text" name="ii2">=
<input type="text" name="ii3">
<input type="submit" id="b2">
{#<input type="submit" id="b3" value="测试参数">#}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
{# ajax法post请求,通过CSRF验证的第二种方法,先死记住吧!不理解源码! #}$("#b2").click(function () {    $.ajax({        url: "/home/",        type: "POST",        headers: {"X-CSRFToken": $("[name=‘csrfmiddlewaretoken‘]").val()},  // 从Cookie获取csrftoken,并设置到请求头中        data: {            ii1: $("[name=‘ii1‘]").val(),            ii2: $("[name=‘ii2‘]").val()        },        success: function (res) {            console.log(res);            $("[name=‘ii3‘]").val(res)        }        })    });
/script> </body> </html>

方法3,全局设置:如果使用cookie从cookie中取值,必要有cookie有cookie的方式,确保cookie存在csrftoken值

  • 使用{% csrf_token %}
  • 不使用{% csrf_token %}   
    •   --->from django.views.decoration.csrf import ensure_csrf_cookie
    • --->ensure_csrf_cookie加在试图函数上,保证返回的响应有cookie
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>实现字符串的拼接</title>
</head>
<body>
<h1>AJAX的请求响应方式</h1>

<hr>
{% csrf_token %}
<input type="text" name="ii1">+
<input type="text" name="ii2">=
<input type="text" name="ii3">
<input type="submit" id="b2">
{#<input type="submit" id="b3" value="测试参数">#}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/static/ajax_setup.js"></script>
<script>

    {# ajax发送post请求,通过CSRF验证的第三种方法,先死记住吧!不理解源码 #}

    $("#b2").click(function () {
        $.ajax({
            url:"/home/",
            type:"post",
            data:{
                ii1:$("[name=‘ii1‘]").val(),
                ii2:$("[name=‘ii2‘]").val(),
            },
            success: function (data) {
                console.log(data);
                $("[name=‘ii3‘]").val(data)
            }
            })
        })

</script>
</body>
</html>
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== ‘‘) {
        var cookies = document.cookie.split(‘;‘);
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + ‘=‘)) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie(‘csrftoken‘);

function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});

试图函数的代码:

from django.shortcuts import render, HttpResponse
import json
# Create your views here.
from django.http import JsonResponse
from django.views.decorators.csrf import ensure_csrf_cookie

# @ensure_csrf_cookie
def home(request):
    # 第二次进来,要获取用户输入的值
    if request.method == "POST":
        ii1 = request.POST.get("ii1")
        ii2 = request.POST.get("ii2")
        print(ii1)
        print(ii2)
        # 获取到数据后做拼接
        ii3 = ii1 + ii2
        # 把处理后的数据发送给前端并渲染
        return HttpResponse(ii3)
    # 第一次进来是GET请求,返回给用于一个页面
    return render(request, "home.html")

#
# def index(request):
#     # 第二次进来是post提交的请求
#     if request.method == "POST":
#         # 获取用户输入的值
#         nn1 = request.POST.get("nn1")
#         nn2 = request.POST.get("nn2")
#         nn3 = nn1 + nn2
#         # 把获取到的值发送给浏览器已经渲染了的页面的对应的地方
#         return HttpResponse(nn3)
#     # 第一次进来是GET请求,返回给用于一个网页
#     return render(request, "home.html")

def ajax_test(request):
    print(123)
    if request.method == "POST":
        # 获取数据
        # 提交过来的数据是字符串类型需要反序列化
        print(request.POST.get("data"))
        data_dict1 = request.POST.get("name")
        data_dict2 = request.POST.get("age")
        data_dict3 = request.POST.get("hobby")
        print("name:",data_dict1,type(data_dict1))
        print("age:",data_dict2,type(data_dict2))
        print("hobby:",data_dict3,type(data_dict3))
        # msg1 = json.loads(data_dict1)
        # msg2 = json.loads(data_dict2)
        msg3 = json.loads(data_dict3)
        # print(msg1)
        # print(msg2)
        print(msg3[0])
        print(msg3[1])
        print(msg3[2])
    #     print(data_dict3[0])
    #     print(data_dict3[1])
    #     print(data_dict3[2])
    # print(789)
    # return HttpResponse("ok")
        ret = {"status":200,"mag":"ok"}
        int("ajgdh")
        return JsonResponse(ret)
    return render(request, "home.html")

    

原文地址:https://www.cnblogs.com/ljc-0923/p/9806224.html

时间: 2024-11-05 22:04:52

AJAX请求提交数据的相关文章

点滴笔记(一):for循环ajax请求添加数据

项目里遇到循环添加数据,添加多条数据到主表后,还要根据每条主表数据主键ID添加到子表里,于是想到post提交 发现循环post没效果,也没async参数.. 于是用ajax里面有async设置了false,循环添加也没达到效果.. 一开始的写法 for(int a=0;a<10;a++) { $.ajax({                 url: "url",                 dataType: 'json',     async:false         

jQuery选取所有复选框被选中的值并用Ajax异步提交数据

昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: 1 <body> 2 <div> 3 <input type=&quo

ajax请求返回数据,模板中的数据处理

/*ajax请求返回数据,模板中的数据处理*/ function QueryGameAsset(){ var new_start_time=$('#new_start_time').val();//开始时间 var new_end_time=$('#new_end_time').val();//结束时间 if(!new_start_time||!new_end_time){ alert("时间不能为空"); return false; } $.ajax({ url:'/Statisti

Android(java)学习笔记210:采用post请求提交数据到服务器

1.POST请求:  数据是以流的方式写给服务器 优点:(1)比较安全 (2)长度不限制 缺点:编写代码比较麻烦   2.我们首先在电脑模拟下POST请求访问服务器的场景: 我们修改之前编写的login.jsp代码,如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ page language="java"

php curl模拟post请求提交数据

最近在做校园图书馆图书信息的采集程序,既然是图书馆图书的采集,肯定有提交搜索的页面,无非是post提交,让我想到了curl模拟提交,首先通过firebug进行抓包查询下post提交后的格式如下: txtWxlx=CN&hidWxlx=spanCNLx&txtPY=HZ&txtTm=%D2%F4%C0%D6&txtLx=%25&txtSearchType=1&nMaxCount=100&nSetPageSize=10&cSortFld=%D5%

php curl模拟post请求提交数据样例总结

在php中要模拟post请求数据提交我们会使用到curl函数,以下我来给大家举几个curl模拟post请求提交数据样例有须要的朋友可參考參考.注意:curl函数在php中默认是不被支持的,假设须要使用curl函数我们需在改一改 在php中要模拟post请求数据提交我们会使用到curl函数,以下我来给大家举几个curl模拟post请求提交数据样例有须要的朋友可參考參考. 注意:curl函数在php中默认是不被支持的,假设须要使用curl函数我们需在改一改你的php.ini文件的设置,找到php_c

ajax请求json数据异常:nested exception is net.sf.json.JSONException: java.lang.reflect.InvocationTargetException] with root cause

ajax请求json数据异常:nested exception is net.sf.json.JSONException: java.lang.reflect.InvocationTargetException] with root cause 1.异常原因:所请求的json数据中包含java.util.date数据类型,但是在后台并没有将其格式转换 2.解决方法:添加工具类DateJsonValueProcessor import java.text.SimpleDateFormat; imp

php curl模拟post请求提交数据例子总结

php curl模拟post请求提交数据例子总结 [导读] 在php中要模拟post请求数据提交我们会使用到curl函数,下面我来给大家举几个curl模拟post请求提交数据例子有需要的朋友可参考参考.注意:curl函数在php中默认是不被支持的,如果需要使用curl函数我们需在改一改 在php中要模拟post请求数据提交我们会使用到curl函数,下面我来给大家举几个curl模拟post请求提交数据例子有需要的朋友可参考参考. 注意:curl函数在php中默认是不被支持的,如果需要使用curl函

vue实战使用ajax请求后台数据(小白)

vue实战使用ajax请求后台数据(小白) 前言:前端小白入门到这个阶段,应该会知道我们所做的页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果.ajax可以帮助我们更好的去实现这一点,下面是详解在vue中如何使用它. vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:https://www.kancloud.cn/yunye/axios/