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. Angularjs 省市区级联

    Json 地区文件:http://blog.csdn.net/youshi520000/article/details/70808580 angularjs angular.module('app') ...

  2. C# XML 序列化帮助类

    /// <summary> /// Xml helper class /// </summary> public static class XmlHelper { #regio ...

  3. 使用ef core自动生成mysql表和数据编码的问题

    mysql默认的编码是不支持中文的,需要改成utf8编码格式. 而我使用的Pomelo.EntityFrameworkCore.MySql组件生成mysql库和表,他是使用默认编码的. 网上大多说修改 ...

  4. bat实现守护程序保证平台正常运行

    1.systeminfo查看系统最近一次重启时间: 2.杀进程: :start taskkill /f /im "xx.exe" goto start "xx.exe&q ...

  5. 关于el-select 单选与多选切换的时候报错的解决办法

    错误: 出错原因: 估计是单选切换到多选的时候元素没有刷新的原因,猜测 解决办法: 1.在el-select上面加上一个条件判断, 条件判断中绑定一个变量值 例如 :multiple="is ...

  6. Python 3.7的新特性

    Python 3.7为数据处理.脚本编译和垃圾收集优化以及更快的异步I/O添加了许多新类.python是一种旨在简化复杂任务的语言.python 3.7的最新版本已经正式休闲鹿进入beta发布阶段.P ...

  7. 认识：before和：after伪类

    有时候,我们需要大量的重复代码去实现一个非常简单的功能,这不仅浪费时间,而且效率低下,例如: <div class="aa">你好</div><div ...

  8. cocos发布遇到的问题

    学习第二天,用官方的demo进行打包,出现以下问题: 第一个问题: 报错信息:scene 没有保存,请先保存相关信息再进行构建. 解决方案:ctrl+s保存即可,一开始没注意前面的英文是场景的意思 第 ...

  9. httpd源码编译安装

    什么是编译安装——编译:将源代码变为机器可执行的代码文件.安装:将可执行文件安装到操作系统里,才可以使用. 一.下载httpd源码包 在官网上下载httpd源码包http://httpd.apache ...

  10. zend studio 13.6.1中文乱码的解决办法

    进入窗口--->首选项--->常规--->工作空间 window=>preference=>General=>workspace 照图设置后重启软件即可