The following is the method of using AJAX that I have compiled for you. Interested students can take a look.
HTTPS
"/jsontest/randomdata/" // there was a missing trailing /// i.e. // was going to https://larsendt.com/jsontest/randomdata/?ymax=500&count=32&t=0.96041791105086431234
GET request
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function checkname(){
//ajax校验用户名
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
document.getElementById('result').innerHTML = xhr.responseText;
}
} //获得输入的用户名，并传递个服务器端
var ming = document.getElementById('username').value; //对ming变量的特殊符号信息进行编码
ming = encodeURIComponent(ming);
xhr.open('get','./04.php?nm='+ming+'&age=23', true); //xhr.open第三个参数默认异步请求为true, 改成同步请求为false;
xhr.send(null);
} </script>
</head>
<body>
<h2 id="ajax之get形式请求">ajax之get形式请求</h2>
<p>用户名：<input type="text" id="username" onblur="checkname()" /></p>
<p>密码：<input type="password" id="userpwd" /></p>
<p id="result"></p>
</body></html>12345678910111213141516171819202122232425262728293031323334353637 POST request
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function checkname(){
//ajax校验用户名
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
document.getElementById('result').innerHTML = xhr.responseText;
}
}
xhr.open('post','./05.php?height=165', true); //默认为true异步请求, false为同步请求
//post请求需要把数据组织为xml格式
//以下方法必须要在"open"方法后进行设置
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); //获得输入的用户名，并传递个服务器端
var ming = document.getElementById('username').value; //对ming变量的特殊符号信息进行编码
ming = encodeURIComponent(ming); //把传递的参数变为"请求字符串"传递给send方法
var info = "nm="+ming+"&age=20";
xhr.send(info);
} </script>
</head>
<body>
<h2 id="ajax之post形式请求">ajax之post形式请求</h2>
<p>用户名：<input type="text" id="username" onblur="checkname()" /></p>
<p>密码：<input type="password" id="userpwd" /></p>
<p id="result"></p>
</body></html>123456789101112131415161718192021222324252627282930313233343536373839404142FormDate collects form data
<!DOCTYPE html><html><head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="common.js"></script></head><body>
<form>
<p>用户名：<input type="text" name="user"></p>
<p>密 码：<input type="password" name="pwd"></p>
<p>邮 箱：<input type="text" name="email"></p>
<p>头 像：<input type="file" name="userpic"></p>
<p><input type="button" value="提交" id="btn"></p>
</form>
<script type="text/javascript">
//form表单节点对象
var oForm = document.getElementsByTagName('form')[0]; //按钮
var oBtn = $('btn');
oBtn.onclick = function(){
//先收集输入框的内容
var user = document.getElementsByName('user')[0].value; var pwd = document.getElementsByName('pwd')[0].value; var email = document.getElementsByName('email')[0].value; //通过ajax提交到服务器
var xhr; try{
xhr = new XMLHttpRequest();
}catch(e){
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
xhr.open('POST','upload.php',true); //实例化表单对象，获得表单里面的输入框的内容（主流浏览器支持）
//参数就是表单节点对象
var data = new FormData(oForm);
xhr.send(data);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status==200){
console.log(xhr.responseText);
}
}
} </script></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748AJAX cross-domain
//放在被访问资源上 <?php header('Access-Control-Allow-Origin:http://A.abc.com'); ?> 12
jasonP
//在客户端定义函数,在服务端定义调用函数和传入参数,请求时传入调用参数内容,服务端就用客户端传入的函数名为调用函数名(可变函数); //<script src=xxx.kuaiyu.com/xxx.php></script> https://xxx.cc.com/xx.php?param=xxx&function_name=function_name//百度标准接口 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=法国大选&cb=demo12345
JQUERY AJAX
Syntax :
$.get(url,data,function(),dataType)
url: Requested file.
data: Pass data.
function(responseText, statusText,xhr): Return function.
responseText: Returned text.
statusText: The returned status value.
status contains the status of the request
("success", "notmodified", "error", "timeout", "parsererror")
xhr: XMLHttpRequest() request object.
datatype:
"xml" - an XML document
"html" - HTML as plain text
"text" - a plain text string
"script" - runs the response in JavaScript and Returns
"json" as plain text - runs the response as JSON and returns it as a JavaScript object
"jsonp" - loads a JSON chunk using JSONP, which will add a "?callback=?" to the URL to specify the callback
.get(),.get(),.post() //post is the same as get parameters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JQuery Collapse</title><SCRIPT LANGUAGE="JavaScript" src="jquery-3.1.1.js"></SCRIPT><script type="text/javascript">$(function(){
$('#bt1').click(function(){
var username = $('input[name=username]').val();//获取用户名的值
var pwd = $('input[name=password]').val();//获取密码的值
$.get( 'get.php',//url
{username:username,pwd:pwd},//$_GET['username']:请求的数据
function(res,sta,xhr){//回调函数
//res:返回值
//sta:返回的状态
//xhr:请求的对象XMLHttprequest
// alert('返回值是：'+res);
if(sta == 'success'){
$('span').html(res);
}
}
)
});
});</script>
<style type="text/css"></style>
</head>
<body>用户名：<input type="text" name='username' /><span></span><br>
密码：<input type="password" name='password' /><br>
<input type="button" id="bt1" value="发送请求" />
</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738394041$.ajax()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JQuery Collapse</title><SCRIPT LANGUAGE="JavaScript" src="jquery-3.1.1.js"></SCRIPT><script type="text/javascript">$(function(){
$('input[name=username]').keyup(function(){
var username = $('input[name=username]').val();//获取用户名的值
var pwd = $('input[name=password]').val();//获取密码的值
$.ajax({
url:'post.php',
data:{username:username,pwd:pwd},
dataType:'html',
type:'post',
success:function(mydata){
$('span').html(mydata);
}
})
});
});</script>
<style type="text/css"></style>
</head>
<body>
用户名：<input type="text" name='username' /><span></span><br>
密码：<input type="password" name='password' /><br>
<input type="button" id="bt1" value="发送请求" />
</body>
</html>The above is what I compiled I hope everyone’s tips on how to use AJAX will be helpful to you in the future.
Related articles:
Detailed explanation of the steps for jQuery ajax to call WCF service
jQuery AJAX timeout timeout emergency handling method
JQuery AJAX implementation file download
The above is the detailed content of Detailed analysis of how to use AJAX (code pasted). For more information, please follow other related articles on the PHP Chinese website!
php如何使用PHP的Intl扩展？May 31, 2023 pm 08:10 PMPHP的Intl扩展是一个非常实用的工具，它提供了一系列国际化和本地化的功能。本文将介绍如何使用PHP的Intl扩展。一、安装Intl扩展在开始使用Intl扩展之前，需要安装该扩展。在Windows下，可以在php.ini文件中打开该扩展。在Linux下，可以通过命令行安装：Ubuntu/Debian：sudoapt-getinstallphp7.4-
如何使用CakePHP中的数据库查询构造器？Jun 04, 2023 am 09:02 AMCakePHP是一个开源的PHPMVC框架，它广泛用于Web应用程序的开发。CakePHP具有许多功能和工具，其中包括一个强大的数据库查询构造器，用于交互性能数据库。该查询构造器允许您使用面向对象的语法执行SQL查询，而不必编写繁琐的SQL语句。本文将介绍如何使用CakePHP中的数据库查询构造器。建立数据库连接在使用数据库查询构造器之前，您首先需要在Ca
php如何使用CI框架？Jun 01, 2023 am 08:48 AM随着网络技术的发展，PHP已经成为了Web开发的重要工具之一。而其中一款流行的PHP框架——CodeIgniter（以下简称CI）也得到了越来越多的关注和使用。今天，我们就来看看如何使用CI框架。一、安装CI框架首先，我们需要下载CI框架并安装。在CI的官网（https://codeigniter.com/）上下载最新版本的CI框架压缩包。下载完成后，解压缩
php如何使用PHP的Ctype扩展？Jun 03, 2023 pm 10:40 PMPHP是一种非常受欢迎的编程语言，它允许开发者创建各种各样的应用程序。但是，有时候在编写PHP代码时，我们需要处理和验证字符。这时候PHP的Ctype扩展就可以派上用场了。本文将就如何使用PHP的Ctype扩展展开介绍。什么是Ctype扩展？PHP的Ctype扩展是一个非常有用的工具，它提供了各种函数来验证字符串中的字符类型。这些函数包括isalnum、is
Vue 中的单文件组件是什么，如何使用？Jun 10, 2023 pm 11:10 PM作为一种流行的前端框架，Vue能够提供开发者一个便捷高效的开发体验。其中，单文件组件是Vue的一个重要概念，使用它能够帮助开发者快速构建整洁、模块化的应用程序。在本文中，我们将介绍单文件组件是什么，以及如何在Vue中使用它们。一、单文件组件是什么？单文件组件（SingleFileComponent，简称SFC）是Vue中的一个重要概念，它
php如何使用PHP的geoip扩展？Jun 01, 2023 am 09:13 AMPHP是一种流行的服务器端脚本语言，它可以处理网页上的动态内容。PHP的geoip扩展可以让你在PHP中获取有关用户位置的信息。在本文中，我们将介绍如何使用PHP的geoip扩展。什么是PHP的GeoIP扩展？PHP的geoip扩展是一个免费的、开源的扩展，它允许你获取有关IP地址和位置信息的数据。该扩展可以与GeoIP数据库一起使用，这是一个由MaxMin
php如何使用PHP的DOM扩展？May 31, 2023 pm 06:40 PMPHP的DOM扩展是一种基于文档对象模型（DOM）的PHP库，可以对XML文档进行创建、修改和查询操作。该扩展可以使PHP语言更加方便地处理XML文件，让开发者可以快速地实现对XML文件的数据分析和处理。本文将介绍如何使用PHP的DOM扩展。安装DOM扩展首先需要确保PHP已经安装了DOM扩展，如果没有安装需要先安装。在Linux系统中，可以使用以下命令来安
php如何使用CI4框架？Jun 01, 2023 pm 02:40 PMPHP是一种广泛使用的服务器端脚本语言，而CodeIgniter4(CI4）是一个流行的PHP框架，它提供了一种快速而优秀的方法来构建Web应用程序。在这篇文章中，我们将通过引导您了解如何使用CI4框架，来使您开始使用此框架来开发出众的Web应用程序。1.下载并安装CI4首先，您需要从官方网站（https://codeigniter.com/downloa
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
