码迷,mamicode.com
首页 > Web开发 > 详细

07: 三种AJAX

时间:2017-12-09 23:55:15      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:jquer   erro   img   status   int   function   页面   obj   form   

1.1 AJAX介绍

  1、AJAX作用

      1. AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

      2. AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

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

  2、AJAX与传统开发模式区别

      ajax开发模式:页面将用户的操作通过ajax引擎与服务器进行通信,将返回的结果给ajax引擎,然后ajax将数据插入指定位置。

      传统的开发模式:用户的每一次操作都触发一次返回服务器的HTTP请求,服务器做出处理后,返回一个html页面给用户。

  3、AJAX请求的三种方法

      1. jQuery Ajax:本质 XMLHttpRequest 或 ActiveXObject

      2. 原生Ajax:主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在

      3. “伪”AJAX:由于HTML标签的iframe标签具有局部加载内容的特性,所以可以使用其来伪造Ajax请求

1.2 jQuery Ajax(第一种)

  1、JQuery ajax说明

                  1、jQuery其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能

                  2、jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject

  2、使用JQuery AJAX发送请求(django中测试)

技术分享图片
from django.shortcuts import render,HttpResponse
import json

def login(request):
    if request.method == GET:
        return render(request,login.html)
    elif request.method == POST:
        print(request.POST)                    #{‘name‘: [‘root‘], ‘pwd‘: [‘123‘]}
        ret = {code:True,data:None}
        return HttpResponse(json.dumps(ret))
views.py视图函数

 

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="add_form">
        <input type="text" name="user" placeholder="用户名">
        <input type="text" name="pwd" placeholder="密码">
        <span id="jquery_ajax">JQuery Ajax提交</span>
    </form>
    <script src="/static/jquery-1.12.4.js"></script>
    
    <script>
        $(#jquery_ajax).click(function(){
            $.ajax({
                
                url: /login/,
                // data: {‘user‘: 123,‘host_list‘: [1,2,3,4]},   // 也可以这样穿数据给后台
                data: $(#add_form).serialize(),                //拿到form表单提交的所有内容
                type: "POST",
                dataType: JSON,                                // 让JQuery将data先JSON后再发送到后台
                traditional: true,                               //如果发送的是列表告诉JQuery也发送到后台
                
                success: function(data, statusText, xmlHttpRequest){
                    if(data.code == true){
                        console.log(返回登录后的页面);
                    }else {
                        console.log(在页面上添加错误提示信息);
                    }
                },
                
                error: function () {
                    //只有当发送数据,后台没有捕捉到的未知错误才执行error函数
                }
            })
        });
    </script>
</body>
</html>
login.html

 

 

 

 

 

 

 

 

 

JQuery ajax

07: 三种AJAX

标签:jquer   erro   img   status   int   function   页面   obj   form   

原文地址:http://www.cnblogs.com/xiaonq/p/8013068.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!