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. 0160 十分钟看懂时序数据库（I）-存储

    摘要:2017年时序数据库忽然火了起来.开年2月Facebook开源了beringei时序数据库:到了4月基于PostgreSQL打造的时序数据库TimeScaleDB也开源了,而早在2016年7月, ...

  2. C# xml序列化 datatime字段

    [XmlIgnore] public DateTime ApplicationDatetime { get; set; } [XmlElement("ApplicationDatetime& ...

  3. css中字体常用单位px、em、rem和%的区别及用法总结

    一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...

  4. WebSocket协议探究（序章）

    一 WebSocket协议基于HTTP和TCP协议 与往常一样,进入WebSocket协议学习之前,先进行WebSocket协议抓包,来一个第一印象. WebSocket能实现客户端和服务器间双向.基 ...

  5. 十二、react-reudx之@connect 摆脱redux的繁琐操作

    如果对redux的概念和用法掌握的已经不错了 那么现在react-redux会让你的操作更加的得心印手 忘记subscribe,记住reducer,action和dispatch即可     Reac ...

  6. 前端开发 Vue -0前言

    Vue2.0 新手完全填坑攻略——从环境搭建到发布 Vue2 入门,读这篇就够了 Jinkey原创感谢 showonne.yubang 技术指导Demo 地址:http://demo.jinkey.i ...

  7. 媲美pandas的数据分析工具包Datatable

    1 前言 data.table 是 R 中一个非常通用和高性能的包,使用简单.方便而且速度快,在 R 语言社区非常受欢迎,每个月的下载量超过 40 万,有近 650 个 CRAN 和 Biocondu ...

  8. Navicat MySql 连不上 本地开发环境 MySQL8.0

    原因:   新版mysql数据库的加密方式改变,进而导致Navicat连接输入的密码不能与安装时输入的密码匹配,那如何解决这个问题呢?很简单,只需要一句代码的事儿~ 1.打开MySQL 8.0 Com ...

  9. PHP常见函数

    有时候,运行nginx和PHP CGI(PHP FPM)web服务的Linux服务器,突然系统负载上升,用top命令查看,很多phpcgi进程的CPU利用率接近100%后来通过跟踪发现,这种情况与PH ...

  10. iOS圆弧渐变进度条的实现

    由于项目需要一个环形渐变进度条显示课程,这方便网上的确有很多相关资料但是,都是比较零散的而且,大多数只是放一堆代码就算完了.这里我想详细写一篇我自己实现这个进度条的过程. 实现一个圆弧进度条主要分为三 ...