JQuery ajax-向服务器发送请求的方法

时间：2017-03-25 10:23:51 阅读：580 评论：0 收藏：0 [点我收藏+]

标签：title value pad fda str 发送用户 val inpu

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);//打开文件

xmlhttp.send();// 发送数据

open(method,url,async)：

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 POST 请求；

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

语法AJAX方法：

$.ajax({name:value, name:value, ... })

 1 <!DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8"/>
 5 <title>Document</title>
 6 </head>
 7 <body>
 8 姓名：<inputtype="text"name="user">
 9 年龄：<inputtype="text"name="age">
10 <inputtype="button"value="输入">
11 <divstyle="border:1px solid red;padding:30px">
12 <h2>你的信息：</h2>
13 <p>XXX</p>
14 <p>XXX</p>
15 </div>
16 </body>
17 <scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
18 <scripttype="text/javascript">
19 var $btn = $("input[type=button]");
20 var $input = $("input[type=text]");
21 var $p = $("p");
22 $btn.on("click",function(){
23 $.ajax({
24 type:"get",// 请求方式；
25 url:"1-jq-ajax-get.php",// 连接服务器数据地址；
26 data:{name:$input.eq(0).val(), age:$input.eq(1).val()},// 传输的数据
27 dataType:"json",//传过来的数据类型
28 success:function(data){
29 console.log(data);//成功的时候
30 $p.eq(0).text(data.name);
31 $p.eq(1).text(data.age);
32 },
33 error:function(){
34 // 传输失败
35 console.log("请求失败！");
36 }
37 });
38 });
39 </script>
40 </html>

View Code

使用ajax的get的方法：$.get:

 1 <!DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8"/>
 5 <title>Document</title>
 6 </head>
 7 <body>
 8 姓名：<inputtype="text"name="user">
 9 年龄：<inputtype="text"name="age">
10 <inputtype="button"value="输入">
11 <divstyle="border:1px solid red;padding:30px">
12 <h2>你的信息：</h2>
13 <p>XXX</p>
14 <p>XXX</p>
15 </div>
16 </body>
17 <scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
18 <scripttype="text/javascript">
19 var $btn = $("input[type=button]");
20 var $input = $("input[type=text]");
21 var $p = $("p");
22 $btn.on("click",function(){
23 // 使用jq的ajax的get方法
24 // $.get("1-jq-ajax-get.php");
25 $.get("1-jq-ajax-get.php",{ name:$input.eq(0).val(), age:$input.eq(1).val()},function(data){
26 console.log(data);
27 $p.eq(0).text(data.name);
28 $p.eq(1).text(data.age);
29 },"json");
30 });
31 </script>
32 </html>

View Code

使用ajax的post的方法：$.post:

$.post(url,[data],[callback],[type]);

$.post("test.php", { name: "John", time: "2pm" },
function(data){
process(data);
}, "xml");

JQuery ajax-向服务器发送请求的方法

标签：title value pad fda str 发送用户 val inpu

原文地址：http://www.cnblogs.com/ChenChunChang/p/6616107.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行