Ajax例子大全整合版

AJAX案例

div 部分用于显示来自服务器的信息。

当按钮被点击时，它负责调用名为loadXMLDoc() 的函数：<html><body><div id="myDiv"><h3>Let AJAX change this text</h3></div><button type="button" onclick="loadXMLDoc()">Change Content</button></body></html>接下来，在页面的 head 部分添加一个 <script> 标签。

该标签中包含了这个loadXMLDoc() 函数：<head><script type="text/javascript">function loadXMLDoc(){.... AJAX script goes here ...}</script></head>AJAX - 创建 XMLHttpRequest 对象∙Previous Page∙Next PageXMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 对象所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：variable=new XMLHttpRequest();老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：variable=new ActiveXObject("Microsoft.XMLHTTP");为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持XMLHttpRequest 对象。

Ajax例子大全整合版例子一1.<%@ page language="java" contentType="text/html; charset=UTF-8"2. pageEncoding="UTF-8"%>3.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN" "/TR/html4/loose.dtd">4.5.<%@ taglib uri="/tags-bean" prefix="bean" %>6.<%@ taglib uri="/tags-html" prefix="html" %>7.<%@ taglib uri="/tags-logic"prefix="logic" %>8.<%@ taglib uri="/tags-tiles"prefix="tiles" %>9.10.<html>11.<head>12.< http-equivhttp-equiv="Content-Type" content="text/html;charset=UTF-8">13.<title>Insert title here</title>14.15.< languagelanguage='java'>16.17.var reg = /^[\da-zA-Z][\w\.]{2,30}[\da-zA-Z]$/;18.var regEmail =/^[a-zA-Z\d][\w_-]{2,14}[a-zA-Z\d]@[a-zA-Z\d]{3,5}([\.][a-zA-Z]{3}|[\ .][a-zA-Z]{2}|[\.][a-zA-Z]{3}[\.][a-zA-Z]{2})$/;19.newUserValidate(loginUName,loginUPwd,loginUPwdAgain,loginEmail)20.{21. var loginUNameloginUName=loginUName.value;22. var loginUPwdloginUPwd =loginUPwd.value;23. var loginUPwdAgainloginUPwdAgain = loginUPwdAgain.value;24. var loginEmailloginEmail = loginEmail.value;25.26. if(loginUPwd == loginUPwdAgain)27. {28. alert("一致");29. }30. else31. {32. slert("两次密码输入的不一致");33. return false;34. }35.36. if(reg.test(loginUName) && reg.test(loginUPwd))37. {38.39. }40. else41. {42. alert("用户名和密码只能是a-z、A-Z、0-9、下划线的字符");43. return false;44. }45.46. if(regEmail.test(loginEmail))47. {48. alert("正确");49. }50. else51. {52. alert("Email输入不正确");53. return false;54. }55.}56.</>57.58.< languagelanguage="java" type="text/java">59. var syj={};60. //发送ajax请求的方法61. syj.Ajax=(url,obj){62. var httpRequest;63. if (ActiveXObject)try{httpRequest = newActiveXObject("Microsoft.XMLHTTP");}catch (e){try{httpRequest = new ActiveXObject("Msxml2.XMLHTTP");}catch (e){}}64. if (!httpRequest){alert('不能创建XMLHTTP实例');obj.onComplete();}65. httpRequest.onreadystatechange = (){if (httpRequest.readyState == 4){obj['onComplete'](httpRequest);}}66. if(url.indexOf('machineDate')==-1)url+=(url.indexOf('?')==-1?"?":"&")+("machineDate="+newDate().getTime());67. url+=(url.indexOf('?')==-1?"?":"&")+obj.parameters;68. if(obj.asynchronous==true) httpRequest.open(obj.method, url); else httpRequest.open(obj.method, url,false);69. httpRequest.send(null);70. return httpRequest;71. };72. test(){73.74. var loginUName=forms[0].loginUName.value;//获得用户名75.76. var url="test.jsp?loginUName="+encodeURI(loginUName);//传用户名77.78. var usernameMsg=getElementById("usernameMsg");//获得将要显示在jsp里的span标签的名字79.80. if(loginUName==""){81. usernameMsg.innerHTML="<font color='red'>×请填写用户名</font>";//用户名为空82. return false;//用户名为空停止在这83. }else{84. usernameMsg.innerHTML="<image src='process.gif'/> 正在登陆…"85. }86.87.88. syj.Ajax(url,{89. method : "GET",90. parameters : "s?wd=csdn",91. asynchronous : true,92. onFailure : (httpRequest){93. alert("出错了!");94. },95. onComplete : (httpRequest){96. if(httpRequest.status==200){97. usernameMsg.innerHTML=httpRequest.responseText;//输出test.jsp里的值98. }99. }100. }101. );102.103. }104. </>105.106.</head>107.<body>108.109.<html:form action="/newUser.do" method="post" onsubmit="return newUserValidate(loginUName,loginUPwd,loginUPwdAgain,loginEmail)"> 110. <tr>111.112. <td>用户名 :</td><td><html:text property="loginUName"style="ime-mode:disabled"down="if(event.keyCode==13)event.keyCode=9"/></td>113. <span id="usernameMsg"></span>114. </tr>115. <br></br>116. <tr>117. <td>密码 :</td><td><html:password property="loginUPwd"style="ime-mode:disabled;width: 130 px; "/></td>118. </tr>119. <br></br>120. <tr>121. <td>重复密码:</td><td><html:password property="loginUPwdAgain" style="ime-mode:disabled;width: 130 px; "/></td>122. </tr>123. <br></br>124. <tr>125. <td>Email :</td><td><html:text property="loginEmail"style="ime-mode:disabled;width: 130 px; "/></td>126. </tr>127. <br></br>128.129. <tr>130. <td>131. 请输入验证码:<html:text property="loginCode"style="ime-mode:disabled;width: 130 px; "/>132. </td>133. </tr>134.135. <tr>136. <td>137. <html:img page="/code.do" border="0"="this.src='/lookctrl/code.do'" alt="请输入此验证码，如看不清请点击刷新。

ajax 接口案例

ajax 接口案例
当谈到AJAX接口案例时，我们可以举一个简单的例子来说明AJAX是如何工作的。

假设我们有一个网页，上面有一个按钮，当用户点击该按钮时，页面会通过AJAX请求从服务器获取一些数据并将其显示在页面上。

这个过程中涉及到前端页面的事件监听、AJAX请求的发送和服务器的响应处理。

首先，我们需要在页面上编写一个按钮，并添加一个点击事件监听器。

当用户点击按钮时，事件监听器会触发一个JavaScript函数。

接着，在JavaScript函数中，我们会创建一个XMLHttpRequest对象，用它来发送AJAX请求。

我们需要指定请求的URL、请求的类型（GET或POST）、以及是否需要发送一些数据给服务器。

在这个例子中，我们可以发送一个GET请求到服务器的某个接口，以获取数据。

当服务器收到请求后，它会处理请求并返回相应的数据。

在前端页面中，我们需要编写代码来处理服务器的响应。

这通常涉及到对返回的数据进行解析，并将解析后的数据显示在页面上。

总的来说，这个简单的例子涵盖了AJAX请求的发送和服务器响应的处理。

当用户点击按钮时，页面通过AJAX请求获取数据，然后将数据展示在页面上。

这个例子展示了AJAX的核心概念和基本工作原理。

除了这个简单的例子，实际的AJAX接口案例可能涉及到更复杂的数据交互、错误处理、安全性考虑等方面。

不同的网站和应用会有不同的AJAX接口设计和使用方式，但核心的工作原理是类似的。

通过AJAX，前端页面可以与服务器进行异步数据交互，从而实现更加动态和交互性的用户体验。

ajax案例

ajax案例Ajax案例。

Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。

它通过在不重新加载整个页面的情况下，能够向服务器发送请求并更新部分页面内容，从而提高用户体验。

下面我们将通过一个实际的案例来展示Ajax的应用。

假设我们有一个网页，上面有一个按钮，当用户点击按钮时，页面中的一段文字会发生变化。

传统的方式是每次点击按钮时都要向服务器发送请求，然后整个页面都要重新加载，这样会导致页面闪烁并且加载速度慢。

但是如果我们使用Ajax技术，就可以在不刷新整个页面的情况下，实现文字的变化。

首先，我们需要编写前端页面的代码。

在HTML中，我们可以使用JavaScript来发起Ajax请求。

我们可以使用XMLHttpRequest对象来创建一个新的HTTP请求，并指定请求的方法、URL和是否异步等参数。

然后我们可以在发送请求后，通过回调函数来处理服务器返回的数据，并更新页面的内容。

接下来，我们需要编写后端服务器的代码。

在服务器端，我们可以使用各种编程语言来处理Ajax请求，比如PHP、Python、Java等。

当服务器接收到Ajax请求后，它会根据请求的内容进行相应的处理，并将处理结果返回给前端页面。

最后，我们需要将前端页面和后端服务器连接起来。

我们可以在前端页面中编写JavaScript代码，使用XMLHttpRequest对象来发送Ajax请求，并在回调函数中处理服务器返回的数据。

通过这种方式，我们就可以实现在不刷新整个页面的情况下，实现页面内容的更新。

通过这个简单的案例，我们可以看到Ajax技术的强大之处。

它可以帮助我们实现更加流畅和动态的网页体验，提高用户对网站的满意度。

当然，Ajax并不是万能的，它也有一些局限性，比如对搜索引擎的友好性不高，以及可能会增加服务器的负担。

因此，在使用Ajax时，我们需要权衡利弊，选择合适的场景来使用。

总之，Ajax是一种非常有用的技术，可以帮助我们实现更加动态和快速的网页。

Ajax的经典示例

一、异步调用的程序示例源自 <script language="JavaScript">
var request = new ActiveXObject("Microsoft.XMLHTTP"); //建立XMLHttpRequest对象
function sendRequest()
<script language="JavaScript">
var request = new ActiveXObject("Microsoft.XMLHTTP"); //建立XMLHttpRequest对象
function sendRequest()
不同的浏览器，建立对象的方式不同这里以IE为例
var request = new ActiveXObject("Microsoft.XMLHTTP")
XMLHttpRequest对象的方法和属性：
open(request-type,url,asynch,username,password)：建立到服务器的新请求。
{
url = "http://test/test.asp?Name=" + Value; //设置要发送的Url，发送的值为键值对
request.open("get",url,false); //调用open方法
401：未经授权
403：禁止访问
404：没找到访问页
200：正常
XMLHttpRequest对象的Head请求
取得Response的Header
request.getAllResponseHeaders();

jq ajax 案例

jq ajax 案例jq ajax 是一种用于在前端网页中发送异步请求的技术。

它基于JavaScript和HTML，可以实现无需刷新整个页面的数据交互。

下面是一些jq ajax的案例，帮助读者了解和掌握这一技术。

1. 实现简单的数据请求和展示在一个网页中，使用jq ajax发送请求获取后端数据，并将返回的数据展示在页面上。

例如，可以通过发送GET请求获取一个用户列表，然后使用jq将返回的数据渲染到页面上的表格中。

2. 动态加载页面内容使用jq ajax动态加载网页内容，可以减少页面加载时间和流量。

例如，可以通过发送GET请求获取一个文章列表，然后使用jq将返回的数据渲染到页面上的列表中。

当用户点击某个文章时，再使用jq ajax发送请求获取该文章的详细内容，并将内容展示在页面上。

3. 实现表单提交和数据验证使用jq ajax可以实现表单提交和数据验证的功能。

例如，在一个注册页面中，当用户填写完表单后，使用jq ajax发送POST请求将表单数据发送到后端进行验证。

如果验证通过，则返回成功的提示信息；如果验证失败，则返回失败的提示信息，并将错误信息展示在页面上。

4. 实现搜索功能使用jq ajax可以实现搜索功能，即在用户输入关键词后，通过发送GET请求获取相关的搜索结果，并将结果展示在页面上。

例如，在一个电影网站中，用户可以输入电影名称进行搜索，使用jq ajax发送请求获取相关的电影列表，并将列表展示在页面上。

5. 实现无限滚动加载使用jq ajax可以实现无限滚动加载功能，即在用户滚动页面到底部时，自动发送请求获取更多的数据，并将数据追加到页面上。

例如，在一个新闻网站中，当用户滚动到页面底部时，使用jq ajax发送请求获取更多的新闻列表，并将列表追加到页面上。

6. 实现图片上传和预览使用jq ajax可以实现图片上传和预览的功能。

例如，在一个头像上传页面中，用户选择一个图片文件后，使用jq ajax将文件发送到后端进行保存，并返回一个预览图片的URL，然后将预览图片展示在页面上。

ajax使用示例

ajax使用示例使用Ajax可异步请求数据，不需要刷新整个页面。

下面是一个简单的例子：```$.ajax({url: 'example.php',type: 'GET',dataType: 'json',success: function(data) {// 处理数据},error: function(xhr, textStatus, errorThrown) {// 处理错误}});```在这个例子中，我们通过GET方式请求example.php服务端页面，服务器返回的数据格式为JSON。

如果请求成功，就会执行success函数，否则执行error函数。

2. 提交表单数据使用Ajax可异步提交表单数据，不需要刷新整个页面。

下面是一个简单的例子：$('form').submit(function(e) {e.preventDefault();$.ajax({url: 'example.php',type: 'POST',data: $(this).serialize(),success: function(data) {// 处理数据},error: function(xhr, textStatus, errorThrown) {// 处理错误}});});```在这个例子中，我们拦截表单的提交事件，防止页面刷新。

然后使用POST方式提交表单数据到example.php服务端页面。

如果请求成功，就会执行success函数，否则执行error函数。

3. 加载HTML片段使用Ajax可异步加载HTML片段，不需要刷新整个页面。

下面是一个简单的例子：$.ajax({url: 'example.html',type: 'GET',dataType: 'html',success: function(data) {$('#container').html(data);},error: function(xhr, textStatus, errorThrown) {// 处理错误}});```在这个例子中，我们通过GET方式请求example.html服务端页面，服务器返回的数据格式为HTML。

ajax请求的例子

ajax请求的例子Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用的技术。

它通过在后台与服务器进行数据交换，实现页面的异步更新，避免了页面的重新加载，提高了用户体验。

下面将为大家介绍一些使用Ajax进行数据请求的例子。

例子一：获取用户信息假设我们有一个网页，需要获取用户的姓名和年龄。

我们可以使用Ajax发送请求，将用户信息发送给服务器，并在页面上显示出来。

以下是使用jQuery库实现的示例代码：```javascript$.ajax({url: "/user",type: "GET",dataType: "json",success: function(response) {var name = ;var age = response.age;$("#name").text(name);$("#age").text(age);}});例子二：搜索功能假设我们有一个搜索框，用户可以在其中输入关键词，并实时获取相关的搜索结果。

以下是一个使用Ajax实现的搜索功能的示例代码：```javascript$("#search-input").on("input", function() {var keyword = $(this).val();$.ajax({url: "/search",type: "GET",data: { keyword: keyword },dataType: "json",success: function(response) {var results = response.results;$("#search-results").empty();for (var i = 0; i < results.length; i++) {$("#search-results").append("<li>" + results[i] + "</li>");}}});});例子三：加载更多内容假设我们有一个新闻网站，页面上只显示了部分新闻内容，用户可以点击“加载更多”按钮来获取更多的新闻。

php html jq ajax 例子

php html jq ajax 例子当你需要使用PHP、HTML、jQuery和Ajax创建一个简单的交互式Web页面时，你可以尝试以下示例。

在这个示例中，我们将创建一个简单的表单，用户可以输入名字，然后通过Ajax将其发送到PHP服务器，然后服务器将其返回，并在页面上显示。

1. HTML文件（index.html）：```html<!DOCTYPE html><html><head><title>PHP, HTML, jQuery, Ajax 示例</title><script src="jquery-3.6.0.min.js"></script><script>$(document).ready(function() {$("#submitBtn").click(function() {var name = $("#nameInput").val();$.ajax({type: "POST",url: "process.php",data: { name: name },success: function(response) {$("#result").html(response);}});});});</script></head><body><h1>输入你的名字</h1><input type="text" id="nameInput"><button id="submitBtn">提交</button><div id="result"></div></body></html>```2. PHP文件（process.php）：```php<?phpif (isset($_POST['name'])) {$name = $_POST['name'];echo "你的名字是：" . $name;} else {echo "名字为空";}>```在这个示例中，我们使用HTML创建了一个输入框和一个按钮。

PHP中AJAX的使用（完整实例【大牛可飘过】）

PHP中AJAX的使⽤（完整实例【⼤⽜可飘过】）有⼀段时间不写关于AJAX的东西了，最近和同学参加个⽐赛，要做⼀个类似博客的东西，⽤到了AJAX的东西，在写东西之前为了再熟悉⼀下AJAX，⾃⼰做了个关于AJAX的⼩事例与⼤家分享⼀下。

AJAX在js⾥可谓是⼀个⽜⽓冲天的⼀个词，我刚学的时候有点望名⽣畏。

对于初学者来说AJAX看似很难，图书馆⾥有些关于AJAX的教程⽐板砖都厚，看了就不想学。

但当你真正长⽤的东西其实就那么写。

在这就不扯那些书上扯的AJAX的历史考古的淡了，不然的话会碎的，你懂的。

OK直⼊正题。

在这呢我主要说⼀下AJAX的⽤法，原理就不多说了。

1.你要⽤AJAX⾸先得会js吧，这个不⽤多说。

⾸先你得NEW⼀个AJAX的对象，类必须得事例化才能使⽤，这个⼤家都知道对吧第⼀步：var oAjax = new XMLHttpRequest(); 但是为了兼容IE6这么蛋疼的浏览器⼀般这么写： if(window.XMLHttpRequest) { var oAjax = new XMLHttpRequest(); } else { //IE var oAjax=new ActiveXObject("Microsoft.XMLHTTP"); } 到这为⽌对象就事例化好了。

2.第⼆步咱得给服务器连接起来吧，这是必须的啊；⽤open();⽤法是这样的：open(传输⽅式，⽂件地址，同步还是异步（默认异步）) oAjax.open('get','ajax.php?hehe='+sValue,true); 3.得发送请求吧： oAjax.send(); 4.就是接收返回值了，就不废话了，直接看代码吧： oAjax.onreadystatechange=function() { //oAjax.readyState 记录步骤 if(oAjax.readyState == 4) { if(oAjax.status == 200) { oDiv.innerHTML = oAjax.responseText; } else { alert("失败"); } } else { alert(oAjax.readyState);//记录步骤 } }　到此为⽌AJAX就OK了：下⾯是我实验的完整事例：html代码如下：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns="/1999/xhtml">3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5 <title>⽆标题⽂档</title>6 <script type="text/javascript">7 window.onload=function()8 {9 var oBtn1=document.getElementById('btn1');10 var oInput=document.getElementById("hehe");11 var oDiv=document.getElementById("div1");12 oBtn1.onclick=function()13 {14 var sValue=oInput.value;15 //alert(sValue);16 //1.创建Ajax对象17 //只兼容⾮IE6的浏览器18 if(window.XMLHttpRequest)19 {20 var oAjax=new XMLHttpRequest();21 }22 else23 {24 //IE625 var oAjax=new ActiveXObject('Microsoft.XMLHTTP');26 }27 //alert(oAjax);28 //2.连接服务器29 //open(传输⽅式，⽂件地址，同步还是异步（默认异步）)30 oAjax.open('get','ajax.php?hehe='+sValue,true);3132 //3.发送请求33 oAjax.send();3435 //4.接收返回36 oAjax.onreadystatechange=function()37 {3839 //oAjax.readyState 记录步骤40 if(oAjax.readyState == 4)41 {42 if(oAjax.status == 200)43 {44 oDiv.innerHTML = oAjax.responseText;45 }46 else47 {48 alert("失败");49 }50 }51 else52 {53 alert(oAjax.readyState);//记录步骤54 }55 }56 //oAjax.send();5758 }59 }60 </script>61 </head>6263 <body>64 <form method="" action="ajax.php">65 呵呵：<input type="text" size=20 name="hehe" id="hehe">66 <input type="button" value="提交" id="btn1">67 </form>68 <div id="div1">69 </div>70 </body>71 </html>后台PHP代码ajax.php1 <?php2 $hehe=$_GET['hehe'];3 echo $hehe;4 ?>简单的AJAX⽤法事例到此为⽌，特为初学者⽽写，⼤⽜可飘过……。

ajax例子详解

ajax例子详解1. AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，通过与服务器交换数据来更新部分网页的技术。

它使用JavaScript和XML（或JSON）来实现异步数据交互，可以实现页面的无刷新更新。

2. 一个经典的AJAX例子是通过AJAX获取服务器上的数据，并将其显示在网页上。

比如，一个网页上有一个按钮，点击按钮后，通过AJAX向服务器发送请求，获取服务器上的数据，然后将这些数据展示在网页上。

3. AJAX的一个常见应用是表单提交。

在传统的网页中，当用户提交表单时，会刷新整个页面。

而使用AJAX，可以实现表单的异步提交，只更新需要更新的部分，提升用户体验。

4. 另一个常见的AJAX应用是无限滚动。

在一些网页上，当用户滚动到页面底部时，会自动加载更多的内容。

这个功能可以通过AJAX 实现，当用户滚动到底部时，通过AJAX向服务器发送请求，获取更多的数据，并将其添加到页面中，实现无限滚动效果。

5. AJAX还可以用于实现自动完成功能。

比如，在搜索框中输入关键字时，可以通过AJAX向服务器发送请求，获取与关键字相关的建议列表，并实时显示在下拉菜单中，帮助用户快速选择。

6. 一个有趣的AJAX例子是实时聊天。

通过AJAX，用户可以实时发送消息并接收其他用户的消息，而不需要刷新页面。

这样可以实现即时通讯的效果。

7. AJAX也可以用于实现动态加载内容。

在一些网页中，当用户点击某个链接时，会通过AJAX加载相关内容，而不需要重新加载整个页面。

这样可以提升用户体验，减少页面加载时间。

8. 另一个常见的AJAX应用是实时更新数据。

比如，在股票交易网站上，可以通过AJAX获取实时的股票行情，并实时更新在页面上，帮助用户及时了解市场动态。

9. AJAX还可以用于实现图片轮播效果。

通过AJAX可以获取服务器上的图片列表，并通过JavaScript实现图片轮播的效果，给用户带来更好的视觉体验。

ajax用法示例

ajax用法示例Ajax（Asynchronous JavaScript and XML）是一种在网页中以异步方式发送和接收数据的技术，可以在不重新加载页面的情况下更新部分网页内容。

Ajax的使用示例如下：1. 发送GET请求并接收数据使用Ajax发送GET请求可以向服务器请求数据，并将返回的数据显示在网页上。

以下是一个使用原生JavaScript实现的Ajax GET请求的示例代码：javascriptlet xhr = new XMLHttpRequest(); 创建一个XMLHttpRequest对象xhr.open("GET", " true); 设置请求的方法、URL和异步标识xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) { 当请求完成且响应状态为200时执行let response = JSON.parse(xhr.responseText); 解析服务器返回的JSON数据document.getElementById("result").innerHTML = response.data;将数据显示在网页上}};xhr.send(); 发送请求2. 发送POST请求并处理数据使用Ajax发送POST请求可以向服务器提交数据，并根据服务器的响应结果做出相应操作。

以下是一个使用jQuery库的Ajax POST请求的示例代码：javascript.ajax({url: "type: "POST",data: {name: "John", age: 25}, 提交的数据success: function(response) {if (response.success) {alert("提交成功！");} else {alert("提交失败！");}},error: function() {alert("请求失败！");}3. 更新网页内容使用Ajax可以在不重新加载整个网页的情况下更新部分网页内容。

Ajax例子

lijiuu的专栏登录注册全站当前博客空间博客好友相册留言Ajax实例（JA V A）收藏这是一个用于留言板留言提交与读取的简单实例，不包括回复、编辑与删除等其它管理功能。

本实例的目的在于用一个简单的例子展示如果在java web应用中，用javascript开发Ajax应用。

一、web页面msbord.jsp1、本页面用于留言显示2、本页面提供留言功能，并利用httpxmlrequest提交给servlet保存数据并使用javascript对页面显示进行调整。

3、本例子没有对httpxmlrequest提交后的返回数据进行处理的实例展示。

<%...@ page language="java" contentType="text/html; charset=gb18030"pageEncoding="gb18030"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><%...@ page import="java.sql.*" %><jsp:useBean id="DataSql" scope="page" class="mon.DataSql"></jsp:useBean> <meta http-equiv="Content-Type" content="text/html; charset=gb18030"><title>留言薄</title><style>...body{...}{font-size:12px;text-align:center;}dl {...}{margin:0;}dt {...}{background-color:#666;color:#fff;margin:1px;padding:0 3px;}dd {...}{margin:3px;}div {...}{margin:auto;line-height:150%;text-align:left;width:400px;border:1px solid #666;} #msgInput {...}{margin-top:10px;}dd.button {...}{text-align:center;}dd.button.input{...}{margin:0 20px;}</style><script type="text/javascript">...function addToList()...{var msgList=document.getElementById("msgBox");var dl=document.createElement("dl");var dt=document.createElement("dt");var dd=document.createElement("dd");var dd2=document.createElement("dd");var dd3=document.createElement("dd");msgList.insertBefore(dl,msgList.firstChild);dl.appendChild(dt);dl.appendChild(dd);dl.appendChild(dd2);dl.appendChild(dd3);dt.innerHTML="主题："+subject.value;dd.innerHTML="留言人："+author.value;dd2.innerHTML="内容："+content.value;dd3.innerHTML="时间："+time.value;subject.value="";author.value="";content.value="";time.value="";}function createXMLHttp()...{var xmlhttp;try...{xmlhttp=new XMLHttpRequest();}catch(e)...{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}return xmlhttp;}function delRecord(id)...{}function ajaxSubmit()...{var xmlhttp=createXMLHttp();xmlhttp.onreadystatechange=function()...{if(4==xmlhttp.readyState)...{if(200==xmlhttp.status)...{//alert(xmlhttp.responseXML);addToList();}else...{alert("no");}}}var sql="insert into msgbox values(null,'"+subject.value+"','"+author.value+"','"+content.value+"','"+time.value+"')";var submitUrl="/servlet/AddRecordServlet?sql="+sql;xmlhttp.open("post",submitUrl,true);xmlhttp.setRequestHeader('Conten-type','application/x-www-form-urlencode');xmlhttp.send(null);return false;}</script></head><body><%...Connection conn=DataSql.getConn();String sql="select * from msgbox order by time DESC";ResultSet rs=DataSql.getRs(conn,sql);while(rs.next()){%><div id="msgBox"><dl id="dl+<%=rs.getString("id") %>"><dt>主题：<%=rs.getString("subject") %></dt><dd>留言人：<%=rs.getString("author") %></dd><dd>内容：<%=rs.getString("content") %></dd><dd>时间：<%=rs.getString("time") %></dd></dl></div><%...}%><div id="msgInput"><form name="msgForm" method="POST"><dl><dt>主题：<input type="text" name="subject" size="42" id="subject"></dt><dd>留言人：<input type="text" name="author" size="42"id="author"></dd><dd>内容：<textarea rows="10" cols="42" name="content" id="content"></textarea></dd><dd>时间：<input type="text" size="42" name="time" id="time"></dd><dd class="button"><input type="button" onClick="ajaxSubmit()" value="提交" > <input type="Submit" value="提交2" ></dd></dl></form></div><script>...var subject=document.forms[0].subject;var author=document.forms[0].author;var content=document.forms[0].content;var time=document.forms[0].time;</script></body></html>二、servlet用于对页面提交数据的处理。

JQuery中Ajax的操作完整例子

JQuery中Ajax的操作完整例⼦Java软件开发中，后台中我们可以通过各种框架，像SSH等进⾏对代码的封装，⽅便我们对Java代码的编写，例如，Struts,SpringMVC对从前台到action的流程进⾏封装控制，使我们只需要进⾏⼀些简单配置就可以实现；⽽spring进⾏了对各种对象的管理进⾏封装，提供了AOP编程的⽅式，⼤⼤⽅便了我们；⽽hibernate和IBatis则是对JDBC代码进⾏封装，不需要我们每次都写那些重复⽽繁杂的JDBC代码。

前台呢，对于页⾯⼀些效果，验证等，我们都是通过JavaScript语⾔进⾏完成的，但是它也就像我们的Java代码⼀样，是最前台语⾔最基础的，⽽jQuery则是对js代码进⾏封装⽅便我们前台代码的编写，⽽且它还有⼀个⾮常⼤的优势就是解决了浏览器的兼容问题，这也是我们使⽤它⾮常重要的原因之⼀。

⽽现在为了满⾜⽤户的需求，Ajax（Asynchronous Javascript + XML）异步刷新起到了⽆可⽐拟的作⽤，以前写Ajax操作，总是需要我们想JDBC代码⼀样进⾏⼏个必备的步骤：AJAX——核⼼XMLHttpRequest对象，⽽JQuery也对Ajax异步操作进⾏了封装，这⾥看⼀下⼏种常⽤的⽅式。

$.ajax，$.post， $.get， $.getJSON。

⼀， $.ajax，这个是JQuery对ajax封装的最基础步，通过使⽤这个函数可以完成异步通讯的所有功能。

也就是说什么情况下我们都可以通过此⽅法进⾏异步刷新的操作。

但是它的参数较多，有的时候可能会⿇烦⼀些。

看⼀下常⽤的参数：var configObj = {method //数据的提交⽅式：get和posturl //数据的提交路劲async //是否⽀持异步刷新，默认是truedata //需要提交的数据dataType //服务器返回数据的类型，例如xml,String,Json等success //请求成功后的回调函数error //请求失败后的回调函数}$.ajax(configObj);//通过$.ajax函数进⾏调⽤。

Jqueryajax完整实例子1

Jqueryajax完整实例⼦1$ajax请求---------------------------------var $personWifePs=$("#wife-money tbody tr");var $personWife=$("#wife-money").find("input.write");var $val=null;$.ajax({type: "POST",url: "data/hm_monery_serceh.php",success: function(dtmonery){var $list = JSON.parse(dtmonery);for(info in $list) {$personWifePs.append(`<td><input id="d${n+=1}" value="${$list[info].monery}" class="write" type="text"/></td>`)$personWife.val($list[info].monery);}}});$personWifePs.on("change",".write",function(){var $iput=$(this);$val=$(this).val();var $index=$personWifePs.children().find("input").index($(this)[0]);$.ajax({type: "POST",url: "data/hm_monery_update.php",data: "id="+($index+1)+"&monery="+$val,success: function(dtmonery){var $listone = JSON.parse(dtmonery);$iput.val($listone.monery);}});});PHP公共---------------------------------<?php//1:将连接数据库与设置编码程序保存// init.php中//2:哪个php需要数据库连接// require('init.php');//require加载-->init.php$conn = mysqli_connect('127.0.0.1','root','','home');$sql = "SET NAMES UTF8";mysqli_query($conn,$sql);>更新PHP-------------------<?php//1:修改响应数据类型header("Content-Type:text/plain;charset=utf-8");//2:获取所有参数@$n = $_REQUEST['id'] or die("-2");@$m = $_REQUEST['monery'] or die("-3");//3:连接数据库设置编码require("init.php");//4:创建sql 发送sql$sql = "UPDATE hm_moneryone SET monery =$m WHERE id = $n ";$result = mysqli_query($conn,$sql);$sql = "SELECT * FROM hm_moneryone WHERE id=$n";$result = mysqli_query($conn,$sql);$back = mysqli_fetch_assoc($result);$json = json_encode($back);echo $json;>查询PHP--------------------<?php//0:修改响应头消息 text/htmlheader("Content-Type:text/html;charset=utf-8");//2:连接数据库设置编码require("init.php");//3:创建sql 发送sql$sql = "SELECT * FROM hm_moneryone";//4:抓取多⾏记录$result = mysqli_query($conn,$sql);$rows = mysqli_fetch_all($result,MYSQLI_ASSOC); $json = json_encode($rows);echo $json;>。

java中ajax的用法简单案例

java中ajax的⽤法简单案例1.index.html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-2.1.0.js"></script><script type="text/javascript">$(function(){//为输⼊框绑定事件$("#btn").click(function(){//1、点击提交后获得输⼊框的内容var name = $("#uname").val();//AJAX回调(调⽤后台⽅法返回数据)$.get("HelloAjax",{"uname":name},function(data){alert(data);})})})</script></head><body><input type="text" id="uname"><input id="btn" type="button" value="提交"></body></html>2.HelloAjax.javapackage web;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;//Servlet@WebServlet("/HelloAjax")public class HelloAjax extends HttpServlet {private static final long serialVersionUID = 1L;public HelloAjax() {super();}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获得输⼊的内容,从request取数据,通俗说就是从浏览器取数据String name = request.getParameter("uname");System.out.println("欢迎:"+name);PrintWriter out = response.getWriter();//返回的是PrintWriter，这是⼀个打印输出流。

Ajax请求示例

Ajax请求⽰例模板1 {% for row in host_list %}2<tr>3<td class="c1">{{ row.id }}</td>4<td>{{ row.servername }}</td>5<td>{{ row.serverip }}</td>6<td>{{ row.serverpassword }}</td>7<td>编辑</td>8<td class="i1">删除</td>9</tr>10 {% endfor %}11</table>12</div>13</div>1415<script src="/static/jquery-3.1.1.js"></script>16<script>17 $(".i1").each(function () {18 $(this).click(function () {19var b = $(this).parent().find("td").get(0).innerText;20 console.log(b);21 $(this).parent().remove();22 $.ajax({23 url:'/host-ajax',24 type:"POST",25 data:{"id":b},26 success:function (data) {27var obj = JSON.parse(data);28 alert(obj.data)29 }30 })31 })32 })33</script>路由系统1 url(r'^host-ajax', views.host_ajax),视图函数1def host_ajax(request):2import json3 res = {"status":True,"error":None,"data":None}4try:5if request.method =="POST":6print("执⾏ post⽅法》》")7 nid = request.POST.get("id")8print("nid:>>>",nid)9 models.HostInfo.objects.filter(id=nid).delete()10 res["data"] = "delete success"11else:12pass13except Exception as e:14 res["status"]= False15 res["error"] = "rquest error"16return HttpResponse(json.dumps(res))Ajax $.ajax({url: '/host', #要提交到那个URL，触发那个函数type: "POST", #提交⽅式data: {'k1': 123,'k2': "root"}, #提交的数据success: function(data){ #回调函数，即只有服务器端返回信息以后会⾃动执⾏，必要带⼀个参数，这个参数代表服务端返回的字典// data是服务器端返回的字符串var obj = JSON.parse(data); #把服务器端返回的字符串变成⼀个json字典的格式对象}})建议：永远让服务器端返回⼀个字典return HttpResponse(json.dumps(字典))。

完整的Ajax实例

完整的Ajax实例写在前⾯的话:⽤了很久的 Ajax,也看了段时间的jquery中ajax的应⽤,但到头来,居然想不起xmlHttpRequest的该如何使⽤了.以前记的也不怎么清楚,这次就重新完整的学习⼀遍吧,也为了⾃⼰以后能找个完整的地⽅来复习.什么是AjaxAjax的全称是Asynchronous Javascript And XML.AJax由HTML,Javascript,DHTML和DOM组成.HTML⽤于建⽴Web表单Javascript代码⽤于运⾏Ajax应⽤程序的核⼼代码,⽤于和服务器引⽤程序进⾏通信DHTML⽤于动态更新表单DOM⽤于处理HTML结构和服务器返回的XML时⾄今⽇,Js中可以处理的数据包括了字符串,JSON,XML数据.优点通过XMLHttpRequest对象来和服务器进⾏通信;在与服务器进⾏异步数据传输时,传输的数据更少;更好的⽤户体验. 实例get.htm页⾯HTML代码如下:js代码如下:新建Get.aspx页,Get.aspx.cs代码如下:结果:输⼊姓名和年龄,点击Get按钮,就会从服务器获取到数据.⼩结:今天暂时写⼀个完整的例⼦来显⽰Ajax的调⽤过程,此例中存在许多问题:1. 如何创建在⼤部分浏览器中都能运⾏的XMLHttpRequest对象.2. 使⽤get请求时存在缓存问题3. 中⽂乱码问题针对这些已经出现的问题,我们在随后的例⼦中会⼀⼀解决.对于其他的疑问,⽐⽅说:1. 如何使⽤post传递数据2. post和get有什么区别3. 如何使⽤传输和使⽤json数据4. 如何传输和使⽤xml数据(毕竟,Ajax最后的⼀个字母x指的是XML)对于这些疑问,我们在随后的⽂章⾥也会⼀⼀解决的.。