余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

AJAX 请求(ajax请求参数)

xiyangw 2022-11-24 16:37 67 浏览 0 评论

什么是 AJAX 请求?

AJAX 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发 技术。
ajax 是一种浏览器通过 js 异步发起请求,局部更新页面的技术。
Ajax 请求的局部更新,浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容

AJAX 请求的示例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
      // 在这里使用 javaScript 语言发起 Ajax 请求,访问服务器 AjaxServlet 中 javaScriptAjax
      function ajaxRequest() {
      // 我们首先要创建 XMLHttpRequest
      var xmlhttprequest = new XMLHttpRequest();
      // 调用 open 方法设置请求参数
      xmlhttprequest.open("GET","http://localhost:8080/Test/ajaxServlet?action=javaScriptAj
      ax",true)
      // 在 send 方法前绑定 onreadystatechange 事件,处理请求完成后的操作。
      xmlhttprequest.onreadystatechange = function(){
      if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
      var jsonObj = JSON.parse(xmlhttprequest.responseText);
      // 把响应的数据显示在页面上
      document.getElementById("div01").innerHTML = " 编号:" + jsonObj.id + " , 姓名:" +
      jsonObj.name;
      }
      }
      // 调用 send 方法发送请求
      xmlhttprequest.send();
      }
    </script>
    </head>
      <body>
      <button onclick="ajaxRequest()">ajax request</button>
      <div id="div01">
      </div>
    </body>
</html>

jQuery 中的 AJAX 请求

$.ajax 方法
url 表示请求的地址
type 表示请求的类型 GET 或 POST 请求
data 表示发送给服务器的数据
格式有两种:
一:name=value&name=value
二:{key:value}
success 请求成功,响应的回调函数
dataType 响应的数据类型
常用的数据类型有:
text 表示纯文本
xml 表示 xml 数据
json 表示 json 对象

$("#ajaxBtn").click(function(){
  $.ajax({
    url:"http://localhost:8080/Test/ajaxServlet",
    // data:"action=jQueryAjax",
    data:{action:"jQueryAjax"},
    type:"GET",
    success:function (data) {
    // alert(" 服务器返回的数据是: " + data);
    // var jsonObj = JSON.parse(data);
    $("#msg").html(" 编号:" + data.id + " , 姓名:" + data.name);
  },
  dataType : "json"
  });
});

方法和.post 方法
url 请求的 url 地址
data 发送的数据
callback 成功的回调函数
type 返回的数据类型

// ajax--get 请求
$("#getBtn").click(function(){
  $.get("http://localhost:8080/Test/ajaxServlet","action=jQueryGet",function (data) {
    $("#msg").html(" get 编号:" + data.id + " , 姓名:" + data.name);
  },"json");
  });
  // ajax--post 请求
  $("#postBtn").click(function(){
    $.post("http://localhost:8080/Test/ajaxServlet","action=jQueryPost",function (data)
  {
      $("#msg").html(" post 编号:" + data.id + " , 姓名:" + data.name);
  },"json");
});

$.getJSON 方法
url 请求的 url 地址
data 发送给服务器的数据
callback 成功的回调函数

// ajax--getJson 请求
$("#getJSONBtn").click(function(){
  $.getJSON("http://localhost:8080/Test/ajaxServlet","action=jQueryGetJSON",function
  (data) {
    $("#msg").html(" getJSON 编号:" + data.id + " , 姓名:" + data.name);
  });
});

表单序列化 serialize() serialize()可以把表单中所有表单项的内容都获取到,并以 name=value&name=value 的形式进行拼接。

// ajax 请求
$("#submit").click(function(){
// 把参数序列化
  $.getJSON("http://localhost:8080/Test/ajaxServlet","action=jQuerySerialize&" +
  $("#form01").serialize(),function (data) {
    $("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name);
  });
});

欢迎关注公众号:愚生浅末。

相关推荐

数控系统常见术语详解,机加工人士必备资料
数控系统常见术语详解,机加工人士必备资料

增量编码器(Incrementpulsecoder)回转式位置测量元件,装于电动机轴或滚珠丝杠上,回转时发出等间隔脉冲表示位移量。由于没有记忆元件,故不能准...

2023-09-24 17:42 xiyangw

功、功率、扭矩的关系

功=功率×时间work=power×timeW=P×T功=力×距离work=force×lengthW=F×LP×T=F×LP=F×L/T=F×V(velocity)具体到电机输出轴上,圆...

Wi-Fi协议(802.11 )常见专业术语汇总
Wi-Fi协议(802.11 )常见专业术语汇总

Wi-Fi协议(802.11)常见专业术语汇总AP(Accesspoint的简称,即访问点,接入点):是一个无线网络中的特殊节点,通过这个节点,无线网络中的...

2023-09-24 17:41 xiyangw

不需要策略模式也能避免满屏if/else
不需要策略模式也能避免满屏if/else

满屏if/elsejava复制代码publicstaticvoidmain(String[]args){inta=1;if...

2023-09-24 17:41 xiyangw

喜极而泣,我终于干掉了该死的 if-else
喜极而泣,我终于干掉了该死的 if-else

推荐阅读:面试淘宝被Tomcat面到“自闭”,学习这份文档之后“吊打”面试官刷完spring+redis+负载均衡+netty+kafka面试题,再去面试BAT...

2023-09-24 17:40 xiyangw

Python中使用三元运算符简化if-else语句
Python中使用三元运算符简化if-else语句

Python是一种极简主义的编程语言,相比其他编程语言,在多个地方简化了代码的写法,可以让我们用更少的时间更简洁地完成工作。以赋值运算符为例:a=a+b简化...

2023-09-24 17:40 xiyangw

雅思课堂 | 雅思口语写作句型第二讲
雅思课堂 | 雅思口语写作句型第二讲

纯干货,无废话用最少的时间学最制胜的内容!泡图书馆泡不过学霸?碎片时间也能弯道超车!向着雅思8分行动起来吧!雅思口语写作句型1.Ipreferseeing...

2023-09-24 17:39 xiyangw

设计模式(三)——简单的状态模式代替if-else
设计模式(三)——简单的状态模式代替if-else

博主将会针对Java面试题写一组文章,包括J2ee,SQL,主流Web框架,中间件等面试过程中面试官经常问的问题,欢迎大家关注。一起学习,一起成长。前言大多数开...

2023-09-24 17:38 xiyangw

如何优化代码中大量的if/else,switch/case?

前言随着项目的迭代,代码中存在的分支判断可能会越来越多,当里面涉及到的逻辑比较复杂或者分支数量实在是多的难以维护的时候,我们就要考虑下,有办法能让这些代码变得更优雅吗?正文使用枚举这里我们简单的定义一...

优秀程序员早就学会用“状态模式”代替if-else了
优秀程序员早就学会用“状态模式”代替if-else了

2020年已经进入倒计时了,大家立好的flag完成了吗?2020实“鼠”不易,希望2021可以“牛”转乾坤。简介状态模式是行为型设计模式的一种。其设计理念是当对...

2023-09-24 17:37 xiyangw

用Select Case语句对执行多条件进行控制
用Select Case语句对执行多条件进行控制

今日的内容是"VBA之EXCEL应用"的第六章"条件判断语句(If...Then...Else)在VBA中的利用"。这讲是第三节...

2023-09-24 17:37 xiyangw

c#入门教程(四)条件判断if else

条件判断,是编程里常用的判断语句,比如某个代码如果满足条件就执行a代码块否则就执行b代码块。案例1:inti=2*5;if(a>0){执行a代码块}elseif(a<0){执行b代码块...

每日学编程之JAVA(十一)—条件语句(if……else)

一个if语句包含一个布尔表达式和一条或多条语句。如果布尔表达式的值为true,则执行if语句中的代码块,否则执行if语句块后面的代码。if语句后面可以跟else语句,当if语句...

不需要策略模式也能避免满屏if/else

除了使用策略模式以外,还可以使用其他设计模式来避免满屏if/else的问题。以下是一些可能的解决方案:工厂模式:将if/else语句移到工厂类中,由工厂类负责创建对象。这样可以将if/else语句从客...

围绕ifelse与业务逻辑的那些梗
围绕ifelse与业务逻辑的那些梗

ifelse很重要,几乎是程序员编程核心,业务逻辑与规则也通过ifelse体现出来,语句简单但是背后文章很大,先看几则幽默图:1.也许默认使用returnf...

2023-09-24 17:36 xiyangw

取消回复欢迎 发表评论: