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. vs2019 扩展工具

    这里只是做个记录,没啥技术含量 本人代码上有些强迫症,所以我的本地代码一定不可以丢,之前用vs2013开始,就安装了localhistory这个插件,十分方便,觉得不用了,清了即可,也不占地方. 但是 ...

  2. （六）Redis之数据结构之Set

    一.常用方法 和List类型不同的是,Set集合中不允许出现重复的元素 添加/删除元素 获取集合中的元素 集合中的差集运算 集合中的交集运算 集合中的并集元算 扩展命令 1和2 添加/删除元素和获取集 ...

  3. dfs · leetcode-22.产生括号组?

    题面 Given n pairs of parentheses, write a function to generate all combinations of well-formed parent ...

  4. 如何在阿里云上运行SAP UI5应用

    本来Jerry觉得这个知识点太简单了完全不值得写成微信公众号文章,但转念一想,可能网络上有一些刚刚初学UI5的朋友们可能会问到,所以还是写了. 今天一个成都同事问我这个问题,因为SAP WebIDE可 ...

  5. LINUX档案权限

    一.ls命令显示目录详细信息 列表显示目录内容 : ls drwxr-xr-x.  4 root   root       4096 Jun 26 02:07 acpi -rw-r--r--.  1 ...

  6. vscode-golang跳转定义无效问题

    问题发现: 本来可以进行"ctrl"+点击或者F12,进行跳转定义的方式,突然失效了 问题分析: 1.辅助工具是否关闭 解决方案,进入首选项,设置,查找go.docsTool,选项 ...

  7. EditText编辑框

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  8. 深度学习之卷积神经网络CNN及tensorflow代码实例

    深度学习之卷积神经网络CNN及tensorflow代码实例 什么是卷积? 卷积的定义 从数学上讲,卷积就是一种运算,是我们学习高等数学之后,新接触的一种运算,因为涉及到积分.级数,所以看起来觉得很复杂 ...

  9. Scrapy 中常用的中间件和管道组件

    Pipeline用法 储存到MongoDB pipline.py中的代码 import pymongo class MongoPipeline(object): def __init__(self, ...

  10. Maven生命周期——2

    Maven牛人说-Maven生命周期 http://juvenshun.iteye.com/blog/213959 Maven的三套生命周期: Clean Lifecycle 在进行真正的构建之前进行 ...