实现Ajax提交数据的三种方式

Ajax提交数据的三种方式

Ajax发送请求的特点是不刷新页面，很常用

一，原生Ajax

实现方式：使用 浏览器中的XmlHttpRequest对象来完成请求

优点：不依赖插件，直接快捷
缺点：代码叫复杂，并且有的低版本浏览器不支持

url关系：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('ajax1/', views.ajax1),
]

views函数：

def index(request):
    return render(request,"ajax1.html")

def ajax1(request):
    return HttpResponse("这是原生Ajax")

html文件

<h1>这是原生Ajax</h1>
<button id ="ajax1">提交</button>
<script>
    document.getElementById("ajax1").onclick=function () {
    
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange=function () {
    
            if (xhr.readyState==4){
    
                alert(xhr.responseText)
            }
        };
        xhr.open("GET","/ajax1");  //GET请求
        xhr.send(null)
        //xhr.open("POST","/ajax1");  //POST请求
        //xhr.send("p=456")
        //如果请求方式是POST,要加上下面的请求头
        //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        //POST方式提交数据也发送到了request.body,Django要根据请求头将数据再解析到request.POST
    }
</script>

二，jQuery下的ajax

实现方式：用JavaScript的类库jQuery对浏览器对象XMLHttpRequest 或 ActiveXObject做好了上层封装

优点：简单快捷
缺点：依赖插件，影响性能

<h1>这是Jquery下的ajax</h1>
<button id ="ajax2">提交</button>
<script src="/static/jquery-3.1.1.min.js"></script>
<script>
    $("#ajax2").click(function () {
    
        $.ajax({
    
            url:"/ajax2",
            method:"GET",
            data:{
    "p":123},
            success:function (arg) {
    
                var ele=JSON