1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > jq封装post请求数据_使用jQuery的$.ajax()/$.get()/$.post()方法获取和提交数据

jq封装post请求数据_使用jQuery的$.ajax()/$.get()/$.post()方法获取和提交数据

时间:2018-12-01 08:03:33

相关推荐

jq封装post请求数据_使用jQuery的$.ajax()/$.get()/$.post()方法获取和提交数据

01第1节:GET和POST请求概述

#JavaScript#在Http中,有多种请求方式,如get、post、put、deletet等,但是最常用的是获取数据和提交数据,获取数据是get请求,提交数据是post请求。

注意:HTTP请求是指客户端向服务器发送的请求。例如使用自己的电脑打开浏览器,输入“百度”的网址,此时就是从你的计算机向百度的服务器发起HTTP请求。

HTTP GET请求:一般情况下是指从指定的资源获取数据,将远程服务器上的数据拿过来使用。GET请求时,Url地址是暴露出来的,大家都可以看,且还可以收藏起来以便下次使用。HTTP POST请求:一般情况下是指将本地的数据提交到远程的服务器上去处理和存储。POST请求时,URL地址是隐藏起来的,不能被收藏。在jQuery的Ajax技术中,可以使用的有3个方法:

$.get()方法主要用于以HTTP GET的方式请求数据。$.post()方法主要用于以HTTP POST的方式请求数据。$.ajax()方法不仅可以POST方式请求,还可以GET方式请求。$.get()方法在jQuery中,对于HTTP GET的请求,专门封装了$.get()方法进行专项的GET请求,这样当我们只需要获取数据时,直接使用$.get()专项方法从远程服务器拿数据即可。

$.get()方法的基本语法如下:

$.get(URL,callback);

该基本语法说明如下:

第1个URL参数是必选参数,主要靠这个URL地址从远程服务器上拿数据,因此,这个URL地址必须准确,是请求的有效资源。第2个callback参数是可选的,功能是请求成功后所要处理的函数代码。使用$.get()方法主要是从远程服务器上获取数据。现在使用jQuery的$.get()方法从远程的服务器上获取内容。

使用的一般处理程序*.ashx提供请求的数据。

Handler1.ashx文件中的内容用于提供给请求者一段文本内容,相当于服务器上端的资源。

现在使用jQuery的$.get()方法获取远程应用程序中Handler1.ashx的内容。

Html+jQuery代码如下:

一都编程,每个知识就是一个案例。

将上面的代码运行一下,结果如下:

当我们点击此页面上的按钮后,过一会儿,就会将一般处理程序中的内容返回并显示在页面上了。

在$.get()方法的回调函数中,第一个data参数的值就是从远程服务器上获取到的数据。

02第2节:$.post()方法

使用$.post()方法可以将html客户端的内容提交到服务器上,并且还可以将Post过来的数据存储到数据库中。

Html文件的代码如下:

在此代码中,使用$.post()向Data1.aspx提交数据,提交的数据放在$.post()方法的第二个参数中,并以对象的形式传递,这里只传递了name属性的值。

然后在Data1.aspx页面中可以使用Request.Form()方法接收,C#代码如下:

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace Yidosoft.Edu.JSWeb{public partial class Data1 : System.Web.UI.Page{DBHelper db = new DBHelper();protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){//接收从Post提交过来的数据object o = Request.Form["Name"];if (o != null){db.ExecuteNonQuery(string.Format("insert into AJAXTable(AJAXName) values('{0}')", o.ToString()));}}}}}

注意:这里使用了DBHelper.cs类库,此类库封装了对SQL Server数据库的基本访问。

将上面的代码运行后,并在页面上输入几个姓名,并提交。提交完成后,打开数据库看一下结果:

03第3节:$.ajax()方法

除了使用$.get()方法和$.post()方法之外,还可以使用$.ajax()方法对服务器进行异步和同步请求数据。

$.ajax()功能最为强大,一般情况下,获取数据的GET请求和提交数据的POST请求,都可以使用$.ajax()方法来实现。

$.ajax()方法的参数是一个对象,以键值对的形式设置参数:

$.ajax({键:值})

一、async参数

在$.ajax()方法中,可以使用async参数设置同步还是异步,默认$.ajax()方法是异步的,即async=true表示异步请求。

注意:同步请求会导致浏览器不能继续下一步操作,必须等待用户完成一个操作之后才能继续后面的操作。存在等待的一个情况,严重影响了用户体验。

二、dataType参数

在$.ajax()方法中,使用dataType参数可以设置希望服务器给我们返回什么类型的数据,是数字呀,还是字符串呢?

也可以理解为是我们想要的数据类型,数据类型以字符串的形式设置。可以使用的类型有:

Html类型:使用"html"表示,主要用于返回具有Html代码的文本内容。Xml类型:使用"xml"表示,用于返回Xml格式的数据内容。JS代码类型:使用"script"表示,用于返回JavaScript代码段,以文本的形式返回。JSON类型:使用"json"表示,希望服务器返回JSON格式的内容,也是以文本的形式返回的。这也是常用的一种格式。文本类型:使用"text":表示,返回文本字符串。三、type参数

Type是$.ajax()方法的一个重要的参数,用于设置HTTP的请求方式,如果没有指定type参数,则使用的是GET请求。

四、url参数

Url参数也是$.ajax()方法的重要参数,用于设置请求的URL地址,如果没有设置URL地址,则默认是当前页面。

五、xhr参数

当$.ajax()方法需要得到一个XMLHttpRequest对象时,可以使用xhr参数来得到,这个参数不常用,我们也不会需要这么一个XMLHttpRequest对象,给我们也带不来什么有用的信息。

04第4节:获取服务器的数据

现在,我们来举一个例子,使用$.ajax()方法获取服务器上的数据,这里获取一般处理程序中的数据。

Html和jQuery的代码如下:

一都编程,每个知识就是一个案例。

将上面的代码运行一下,主要功能是使用$.ajax()技术获取数据,结果如下:

此时,当我们点击“获取”按钮后,就会通过GET请求从一般处理程序中以text格式异步的方式得到远程服务器上的数据。

05第5节:提交数据到服务器

同样道理,使用$.ajax()方法也可以向服务器提交数据,语法都是一样的,只不过,需要将提交的数据以对象的方式提交给服务器。

Html代码和jQuery代码如下:

使用这段代码,就可以将页面上的数据收集起来,并提交到远程的服务器上。运行结果如下:

在此代码中,当在文本框中输入内容之后,点击“提交”按钮就会触发$.ajax()方法的执行,并将数据存储到数据库中:

此时,我们在远程的服务器上,已经得到了提交过来的数据了,这表明上面使用$.ajax()方法和一般处理程序是可以实现数据从客户端以AJAX的方式提交数据到服务器上。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。