如需将请求发送到服务器,我们使用 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, ... })
 <!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>

 使用ajax的get的方法:$.get:
 <!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>
 
使用ajax的post的方法:$.post:
$.post(url,[data],[callback],[type]);
$.post("test.php", { name: "John", time: "2pm" },
function(data){
process(data);
}, "xml");

JQuery ajax-向服务器发送请求的方法的更多相关文章

  1. 【03】AJAX 向服务器发送请求

    AJAX 向服务器发送请求   创建 XMLHttpRequest 对象后,就可以向服务器发送请求了. XMLHttpRequest 对象的 open() 方法和 send() 方法用来向服务器发送请 ...

  2. AJAX - 向服务器发送请求请求

    AJAX - 向服务器发送请求请求 XMLHttpRequest 对象用于和服务器交换数据.直线电机生产厂家 向服务器发送请求 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 ...

  3. AJAX向服务器发送请求

    使用 XMLHttpRequest 对象的 open() 和 send() 方法: 方法 描述 open(method,url,async) 规定请求的类型.URL 以及是否异步处理请求. metho ...

  4. Ajax学习系列——向服务器发送请求

    1.如何发送请求? 如果需要向服务器发送请求,我们使用的是XMLHttpRequest对象中的open()和send()方法. var xhr = new XMLHttpRequest();//具体创 ...

  5. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

  6. ajax-向服务器发送请求

    ajax-向服务器发送请求 1.将请求发送到服务器,使用XMLHttpRequest对象的 open() 和 send() 方法.     xmlhttp. open(method,url,async ...

  7. Ajax向服务器端发送请求

    Ajax向服务器端发送请求 Ajax的应用场景 页面上拉加载更多数据 列表数据无刷新分页 表单项离开焦点数据验证 搜索框提示文字下拉列表 Ajax运行原理 Ajax 相当于浏览器发送请求与接收响应的代 ...

  8. android客户端向服务器发送请求中文乱码的问

    android客户端向服务器发送请求的时候,并将参数保存到数据库时遇到了中文乱码的问题: 解决方法: url = "http://xxxx.com/Orders/saveorder.html ...

  9. Ajax向服务器发起请求

    Ajax向服务器发起请求的三个步骤: 1:创建Ajax 2:打开Ajax,打开Ajax请求 3:向服务器发起请求:需要知道地址和是get请求还是post方法 向服务器发起请求的两个方法:open 和 ...

随机推荐

  1. C#递归例程

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  2. 开发一个小的php扩展

    今天试了一下在php添加扩展,看了挺多资料,细节上不一致,其他大体是差不多的. 我们来开发一个叫ccvita_string的函数,他的主要作用是返回一段字符,对应的php代码可能如此: functio ...

  3. Mac下安装HomeBrew

    本文章为菲利克斯猫(Felix.mao)原创,转载务必在明显处注明:原文链接:http://blog.csdn.net/maojudong/article/details/7918291 1.  前言 ...

  4. [转] 打开 CMD 时自动执行命令

    [转] 打开 CMD 时自动执行命令 问题描述 在Windows中打开一个command-prompt时,我正在寻找一种方法来执行一些控制台命令,特别是设置一些命令别名. 例如,当打开command- ...

  5. 苹果隐私条例更新:收集用户电话和 Email 数据

    简评:苹果现在会收集用户的电话和电子邮件,作为用户「信任评级」的一部分,我还是支持的,因为园长被黑产攻击 AppleID,直接刷爆了我的卡!但是在大环境看,隐私已经不存在了. Apple 最近悄悄为 ...

  6. 读取Properties文件的六种方法

    1.使用java.util.Properties类的load()方法 示例: InputStream in = new BufferedInputStream(new FileInputStream( ...

  7. P3698 [CQOI2017]小Q的棋盘

    题目链接 题意分析 首先 我们肯定会贪心的走从根节点到叶子结点最长的一条链 首先没有过剩的就好办了 但是有的话 我们就一边往下走 一边走分支 分支上每一个点平均走过两次 所以我们把剩下的除以\(2\) ...

  8. easyui实现多选框,并且获取值

    在easyui官方文档里面是没有combobox下拉框,可以进行多选的,但是其实是可以多选的, <td align="left">大区:   <input typ ...

  9. js对象注意

    var obj = {}; //定义一个对象 obj[1] = 1; //设置obj对象的属性为数字1属性,属性值为1 obj['1'] = 2398; //设置obj对象的属性为字符串1属性,属性值 ...

  10. MNIST手写数字识别 Tensorflow实现

    def conv2d(x, W): return tf.nn.conv2d(x, W, strides=[1, 1, 1, 1], padding='SAME') 1. strides在官方定义中是一 ...