JQuery ajax-向服务器发送请求的方法
规定请求的类型、URL 以及是否异步处理请求。
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
语法AJAX方法:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>Document</title>
</head>
<body>
姓名:<inputtype="text"name="user">
年龄:<inputtype="text"name="age">
<inputtype="button"value="输入">
<divstyle="border:1px solid red;padding:30px">
<h2>你的信息:</h2>
<p>XXX</p>
<p>XXX</p>
</div>
</body>
<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<scripttype="text/javascript">
var $btn = $("input[type=button]");
var $input = $("input[type=text]");
var $p = $("p");
$btn.on("click",function(){
$.ajax({
type:"get",// 请求方式;
url:"1-jq-ajax-get.php",// 连接服务器数据地址;
data:{name:$input.eq(0).val(), age:$input.eq(1).val()},// 传输的数据
dataType:"json",//传过来的数据类型
success:function(data){
console.log(data);//成功的时候
$p.eq(0).text(data.name);
$p.eq(1).text(data.age);
},
error:function(){
// 传输失败
console.log("请求失败!");
}
});
});
</script>
</html>
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>Document</title>
</head>
<body>
姓名:<inputtype="text"name="user">
年龄:<inputtype="text"name="age">
<inputtype="button"value="输入">
<divstyle="border:1px solid red;padding:30px">
<h2>你的信息:</h2>
<p>XXX</p>
<p>XXX</p>
</div>
</body>
<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<scripttype="text/javascript">
var $btn = $("input[type=button]");
var $input = $("input[type=text]");
var $p = $("p");
$btn.on("click",function(){
// 使用jq的ajax的get方法
// $.get("1-jq-ajax-get.php");
$.get("1-jq-ajax-get.php",{ name:$input.eq(0).val(), age:$input.eq(1).val()},function(data){
console.log(data);
$p.eq(0).text(data.name);
$p.eq(1).text(data.age);
},"json");
});
</script>
</html>
$.post("test.php", { name: "John", time: "2pm" },
function(data){
process(data);
}, "xml");
JQuery ajax-向服务器发送请求的方法的更多相关文章
- 【03】AJAX 向服务器发送请求
AJAX 向服务器发送请求 创建 XMLHttpRequest 对象后,就可以向服务器发送请求了. XMLHttpRequest 对象的 open() 方法和 send() 方法用来向服务器发送请 ...
- AJAX - 向服务器发送请求请求
AJAX - 向服务器发送请求请求 XMLHttpRequest 对象用于和服务器交换数据.直线电机生产厂家 向服务器发送请求 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 ...
- AJAX向服务器发送请求
使用 XMLHttpRequest 对象的 open() 和 send() 方法: 方法 描述 open(method,url,async) 规定请求的类型.URL 以及是否异步处理请求. metho ...
- Ajax学习系列——向服务器发送请求
1.如何发送请求? 如果需要向服务器发送请求,我们使用的是XMLHttpRequest对象中的open()和send()方法. var xhr = new XMLHttpRequest();//具体创 ...
- jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...
- ajax-向服务器发送请求
ajax-向服务器发送请求 1.将请求发送到服务器,使用XMLHttpRequest对象的 open() 和 send() 方法. xmlhttp. open(method,url,async ...
- Ajax向服务器端发送请求
Ajax向服务器端发送请求 Ajax的应用场景 页面上拉加载更多数据 列表数据无刷新分页 表单项离开焦点数据验证 搜索框提示文字下拉列表 Ajax运行原理 Ajax 相当于浏览器发送请求与接收响应的代 ...
- android客户端向服务器发送请求中文乱码的问
android客户端向服务器发送请求的时候,并将参数保存到数据库时遇到了中文乱码的问题: 解决方法: url = "http://xxxx.com/Orders/saveorder.html ...
- Ajax向服务器发起请求
Ajax向服务器发起请求的三个步骤: 1:创建Ajax 2:打开Ajax,打开Ajax请求 3:向服务器发起请求:需要知道地址和是get请求还是post方法 向服务器发起请求的两个方法:open 和 ...
随机推荐
- SQLServer数据库的状态一直都是正在还原
解决方案: 执行以下SQL语句 restore database [数据库名称] with recovery
- C++ windows进程间通信
最近一直在找共享内存同步的操作,恰好这篇文章有讲解.本文转载:https://blog.csdn.net/bing_bing_bing_/article/details/82875302 方便记录,c ...
- 浅谈由管理者角色引出的B端产品设计思考点
本文来自网易云社区 作者:任琼瑶 最近一直都在持续跟进云课堂B端的交互设计,在此期间,多多少少遇到了一些不曾遇到过的问题,虽然同是做产品设计,但B端和C端产品的确存在很多不同之处. 首先,当我们在做C ...
- Promise之你看得懂的Promise
本文由作者陈旭锋(任职网易考拉)授权网易云社区发布. Promise源码详解 学习知识要善于思考,思考,再思考. -- 爱因斯坦 1.回调地狱 曾几何时,我们的代码是这样的,为了拿到回调的结果,不得不 ...
- ADB模块源码分析(二)——adb server的启动
1. ADB Server的启动 前面我们讲到adb模块的源码在system/core/adb下面,通过查看Android.mk文件我们了解到这个adb 模块回编译生成连个可执行文件adb.adbd, ...
- order by 使用注意
create table user ( id int primary key, name varchar(11) , depid int ); create table dept( id int pr ...
- sonarLint和sonarQube
在线安装和离线装sonarLint https://blog.csdn.net/limm33/article/details/51166840 下载指定版本的sonarLint https://bin ...
- 基本项目框架搭建 sqlserver druid配置
1. 我的连接池采用的是阿里云的druid的连接池,工具是IDEA 框架是springboot+maven 以下是我的项目框架结构 2. pom 中配置 <?xml version=&quo ...
- Lambda入门
Lambda 来源于微积分数学中的 λ,其涵义是声明为了表达一个函数具体需要什么. Table of contents Introduction 使用 Introduction 什么是Lambda? ...
- day 08 课后作业
# -*- coding: utf-8 -*-# @Time : 2018/12/27 17:27# @Author : Endless-cloud# @Site : # @File : day 8课 ...