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

Ajax

时间:2016-09-08 19:57:44      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:

AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案。
 
异步的JavaScript:
使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript的回调函数】。
PS:以上请求和响应的整个过程是【偷偷】进行的,页面上无任何感知。
XML
XML是一种标记语言,是Ajax在和后台交互时传输数据的格式之一
利用AJAX可以做:
1、注册时,输入用户名自动检测用户是否已经存在。
2、登陆时,提示用户名密码错误
3、删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。
 
Jquery-Ajax    
  1.下载导入jQuery,放在static目录下
    2.setting中导入配置
    3.在HTML中引用jQuery
$.ajax({
		url: ‘/index/‘,
		type: ‘POST‘,
		data: {‘username‘: ‘alex‘,‘password‘: ‘123‘},
		success: function(data){
			// 当后台return之后,该函数自动执行
			// data就是后台返回的数据
		}
	})

看一个例子
前端页面:
技术分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <p>用户名:<input type="text" id="username" /></p>
    </div>
    <div>
        <p>用户名:<input type="password" id="pwd" /></p>
    </div>
    <input type="button" value="提交" onclick="SubmitForm();" />
    <script src="/static/jquery-1.8.2.min.js"></script>
    <script>
        function SubmitForm(){
            $.ajax({
                url: /web/ajax_demo/,
                type: POST,
                data: {user: $(#username).val(), pwd: $(#pwd).val()},
                dataType: json,
                success: function (data) {
                    // data = 字符串 {status:xx,message:‘‘}
                    // data对象
                    //var data_dict = JSON.parse(data);
                    if(data.status){
                        location.href = "http://www.baidu.com";
                    }else{
                        alert(data.message);
                    }
                }
            })
        }
    </script>
</body>
</html>
View Code

Django中view.py

技术分享
import json
def ajax_demo(request):
    if request.method == POST:
        ret = {status:False,message:‘‘}
        user = request.POST.get(user,None)
        pwd = request.POST.get(pwd,None)
        if user == 111 and pwd == 222:
            # return HttpResponse(‘1‘)
            ret[status] = True
            return HttpResponse(json.dumps(ret))
        else:
            # return HttpResponse(‘2‘)
            ret[message]=用户名或者密码错误!
            return HttpResponse(json.dumps(ret))
    return render(request,ajax_demo.html)
View Code
基于jQuery实现的ajax可以说是最为方便好用的,实际上jQuery无法直接响应ajax,而是通过XMLHttpResponse来相应,XMLHttpResponse又叫原生ajax。详见

Ajax

标签:

原文地址:http://www.cnblogs.com/ernest-zhang/p/5854241.html

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