如何利用Javascript发送GET/POST请求

基于JQuery的GET/POST数据提交方式

如果初学Javascript&＃xff0c;对于JQuery可能会跟我一样完全不清楚&＃xff0c;所以适当的普及一下JQuery是一个快速、简洁的Javascript框架&＃xff0c;是继Prototype之后又一个优秀的Javascript代码库&＃xff08;或Javascript框架&＃xff09;。JQuery设计的宗旨是“write Less&＃xff0c;Do More”&＃xff0c;即倡导写更少的代码&＃xff0c;做更多的事情。

它封装Javascript常用的功能代码&＃xff0c;提供一种简便的Javascript设计模式&＃xff0c;优化HTML文档操作、事件处理、动画设计和Ajax交互。JQuery的核心特性可以总结为&＃xff1a;具有独特的链式语法和短小清晰的多功能接口&＃xff1b;具有高效灵活的css选择器&＃xff0c;并且可对CSS选择器进行扩展&＃xff1b;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器&＃xff0c;如IE 6.0&＃43;、FF 1.5&＃43;、Safari 2.0&＃43;、Opera 9.0&＃43;等。

JQuery的官网地址&＃xff0c;可以点击访问。根据官方给出的版本&＃xff0c;目前最新的已经到了v3.2.1&＃xff0c;因此建议可以考虑去官网下载最新的JQuery&＃xff0c;以次获得更多的特性。

JQuery很强大&＃xff0c;但实现当前这个功能需要的仅仅是简单的两个&＃xff0c;API&＃xff0c;完整的API说明文档可以点击查看&＃xff0c;此外&＃xff0c;在runnoob.com上也有关于Javascript的学习资料。

$.get(url, data, callback)

$.post(url, data, callback)

使用方法是这样的&＃xff0c;首先&＃xff0c;在需要调用JQuery的页面里&＃xff0c;用script标签导入Jquery文件&＃xff0c;例如&＃xff1a;

然后&＃xff0c;网页空白的地方&＃xff0c;申明你的方法以及需要传递的参数&＃xff0c;你可以这样做&＃xff1a;

接着&＃xff0c;在你的input/button标签或者需要发送数据的地方&＃xff0c;增加一个onclick的属性&＃xff0c;例如&＃xff1a;

......


这样就可以使用JQuery发送数据了。

另外一种方法&＃xff0c;是构造一个form&＃xff0c;利用form来进行提交。

使用Javascript/form提交GET/POST数据提交方式

/*
* &＃64;url: url link
* &＃64;action: "get", "post"
* &＃64;json: {&＃39;key1&＃39;:&＃39;value2&＃39;, &＃39;key2&＃39;:&＃39;value2&＃39;}
*/
function doFormRequest(url, action, json)
{var form &＃61; document.createElement("form");form.action &＃61; url;form.method &＃61; action;// append input attribute and valusfor (var key in json){if (json.hasOwnProperty(key)){var val &＃61; json[key];input &＃61; document.createElement("input");input.type &＃61; "hidden";input.name &＃61; key;input.value &＃61; val;// append key-value to formform.appendChild(input)}}// send post requestdocument.body.appendChild(form);form.submit();// remove form from documentdocument.body.removeChild(form);
}


调用方法很简单&＃xff0c;把这个代码块copy到你自己的HTML文档里的script标签内&＃xff0c;然后就可以直接用了&＃xff0c;选择GET/POST方法根据你自己的需要就行。
具体在使用过程中有什么区别&＃xff0c;得你自己慢慢体会了。