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. IE6/7下Select控件Display属性无效解决办法

    HTML的Select控件,C#的DropDownList服务器控件 设置父类型Display属性之后,在IE6/7上无效 直接将下段javascript脚本添加到页面中即可 <script t ...

  2. freemarker循环、下标及判断

    一.freemarker中list循环使用非常频繁,下面介绍lfreemarker中list简单的用法 1.在freemarker中遍历list数组使用list指令:<#list sequenc ...

  3. Jmeter测试出现端口占用情况

    Jmeter测试会出现端口占用情况 这边在这里做个记录,每次都要百度查询,刚好需要整理下,我就也记录一份到这里吧.感谢大佬的文章. 参考文章:windows下Jmeter压测端口占用问题 因Windo ...

  4. 下拉框选择 <from:select>

  5. menustrip选项怎么设置竖向分割线

    效果图: 解决方案: 选中一个项--[右键]--[插入]--[separator]

  6. eclipse导入项目后出现红色叉号的解决方案

    对于一名程序员来说,我导入的项目在项目的名称上无端加了一个红色的叉号,虽然这个不友好的符号,对于我整个的项目运行没有任何影响,但是总让我觉得不舒服,大大的叉号写在我的项目的脑袋上,我心里能舒服吗?于是 ...

  7. mysql的unsigned属性负值报错和为0情况及mysql的严格模式

    最近发现在进行线程操作时,发现数据库的unsigned字段减为负数时并未报错而是变为0,因此去寻找解决方案,发现这和我的sql_mode有关. sql_mode MySQL服务器可以以不同的SQL模式 ...

  8. eclipse开发scrapy爬虫工程，附爬虫临门级教程

    写在前面 自学爬虫入门之后感觉应该将自己的学习过程整理一下,也为了留个纪念吧. scrapy环境的配置还请自行百度,其实也不难(仅针对windows系统,centos配置了两天,直到现在都没整明白) ...

  9. 从win到多系统

    相信有不少电脑爱好者喜欢折腾系统,尤其还是一个小白(感觉多系统强的不要不要的,各种崇拜),然后就走上了深渊. 首先,我一开始也是个win系统的忠实用户,没用过其他系统的我几乎不知道其他系统的存在,反正 ...

  10. linux 服务器常规巡检并生成报表（一）

    背景 最近接到一个需求要求每天巡检各台业务设备,并导出报表,但一想到设备有N台,一台台每天巡检这样的重复劳作实在是太伤神了,因此决定写一个脚本来搞定这件事. 首先,第一个要解决的问题是批量服务器执行命 ...