zoukankan      html  css  js  c++  java
  • Ajax

    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。详见
  • 相关阅读:
    c++中static的使用
    sublime3 ctl+b无效
    Maximum Subarray
    Find the Duplicate Number
    Reverse Linked List
    c++ primer 2 变量和基本类型
    Single Number II
    Roman to Integer & Integer to Roman
    Search Insert Position
    Unique Binary Search Trees II
  • 原文地址:https://www.cnblogs.com/ernest-zhang/p/5854241.html
Copyright © 2011-2022 走看看