1. JS实现Ajax

<!doctype html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport"

         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

</head>

<body>

   <button type="submit" id="js_ajax_test">Ajax测试</button>

   <script>

       var js_ajax_test = document.getElementById("js_ajax_test");

       js_ajax_test = function () {

           var xmlHttp = new XMLHttpRequest();

           xmlHttp.open("POST", "/js_ajax_test/", true);

           xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

           xmlHttp.send("username=yang&password=123");

           xmlHttp.onreadystatechange = function () {

               if (xmlHttp.readyState === 4 && xmlHttp.status ===200){

                   alert(xmlHttp.responseText)

               }

           }

       }

   </script>

</body>

</html>

2. jQuery实现的Ajax

最基本的jQuery发送Ajax请求示例：

<!doctype html>

<html lang="">

<head>

   <meta charset="UTF-8">

   <meta name="viewport"

         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

   <title>ajax test</title>

</head>

<body>

   <button id="ajaxTest">AJAX测试</button>

   <script>

       $("#ajaxTest").click(function () {

           $.ajax({

               url: "/ajaxTest/",

               type: "POST",

               data: {username: "yang", password:123},

               success: function (data) {

                   alert(data)

               }

           })

       })

   </script>

</body>

</html>

views.py

def ajax_test(request):

   return render(request, "ajax_test.html")

def ajaxTest(request):

   username = request.POST.get("username")

   password = request.POST.get("password")

   return HttpResponse("用户名：{} 密码：{}".format(username, password))

urls.py

from django.conf.urls import url

from django.contrib import admin

from app01 import views

urlpatterns = [

   url(r'^admin/', admin.site.urls),

   url(r'^ajax_test/', views.ajax_test),

   url(r'^ajaxTest/', views.ajaxTest)

]

3. Ajax中使用JSON

data参数中的键值对，如果值不为字符串，需要将其转换成字符串类型。

如果没有转换为字符串，那么views中的代码就接收不到password的值。

<script>

       $("#ajaxTest").click(function () {

           $.ajax({

               url: "/ajaxTest/",

               type: "POST",

               data: {username: "yang", password:JSON.stringify([1, 2, 3])},

               success: function (data) {

                   alert(data)

               }

           })

       })

</script>

js和jQuery实现的Ajax的更多相关文章

  1. 原生 JS 与 jQuery 中的 AJAX

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更 ...

  2. 论如何把JS踩在脚下 —— JQuery基础及Ajax请求详解

    一.什么是JQuery? JQuery是一种JavaScript框架,是一堆大神搞出来的能够让前端程序猿敲更少代码.实现更多功能的工具(在此,跪谢各位JQuery开发大大们!!!).JQuery的使用 ...

  3. Ajax 跨域难题 - 原生 JS 和 jQuery 的实现对比

    讲解顺序: AJAX 的概念及由来 JS 和 jQuery 中的 ajax 浏览器机制 AJAX 跨域 AJAX 的概念 在讲解 AJAX 的概念之前,我先提一个问题. 这是一个典型的 B/S 模式. ...

  4. JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...

  5. prototype.js 和 jQuery.js中 ajax 的使用

    这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...

  6. AJAX请求和跨域请求详解（原生JS、Jquery）

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  7. [转]网页实时聊天之js和jQuery实现ajax长轮询 PHP

    网页实时聊天之js和jQuery实现ajax长轮询 众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的 ...

  8. js中的原生Ajax和JQuery中的Ajax

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). js中的Ajax: 参数介绍: open(String method,Str ...

  9. 原生js，jquery通过ajax获得后台json数据动态新增页面元素

    一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...

随机推荐

  1. 怎样理解window.name

    window.name表示当前窗口的名字, 而非网页的名字, 网页的名字需要使用: document.title; window.name一般是空的字符串, 他的作用其实是配合配合超链接和表单的tar ...

  2. [jquery]ajax最最常用的七个属性

    1.url 类型:String 默认值: 当前页地址.发送请求的地址. 2.data 类型:String 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 pr ...

  3. （四）springmvc之获取servlet原生对象

    一.使用DI注入的方式 <a href="<%=request.getContextPath()%>/servletObj_1">DI注入的方式</a ...

  4. Android 自定义控件之 日期选择控件

    效果如下: 调用的代码: @OnClick(R.id.btn0) public void btn0() { final AlertDialog dialog = new AlertDialog.Bui ...

  5. Django迁移

    Django迁移 学习目标: 如何在不编写任何SQL语句的情况下创建数据库表 更改model如何自动修改数据库 如何还原对数据库所做的更改 迁移能解决的问题 如果你不了解Django或者WEB开发,肯 ...

  6. nexus 匿名用户的问题。

    为了做到安全和不浪费我们自己的服务器资源,要绝对拒绝匿名用户进行访问: 1,不允许匿名用户访问 2,禁用匿名的账号 以下是这2点的设置图. ============================== ...

  7. mimikatz记录

    mimikatz需要管理员权限运行 vps监听 nc -lvp 4444 服务器管理员权限执行 mimikatz.exe ""privilege::debug"" ...

  8. 用js刷剑指offer(变态跳台阶)

    一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 牛客网链接 思路 假设青蛙跳上一个n级的台阶总共有f(n)种跳法. 现在青蛙从第n个台阶 ...

  9. Go语言中的defer

    可以用作一些资源的释放. 1.在一个函数内的defer执行顺序是先写的后执行,后写的先执行(遵循栈结构) func DeferTest1(){ defer fmt.Println("我是 d ...

  10. javascript获取用户按了哪个键

    浏览器好像不允许js获取F5这个键的按下事件,应该屏蔽了,这个键太过特殊,猜测可能是,防止用户失去对浏览器的控制? <!DOCTYPE html> <html> <hea ...