捯饬博客时候需要在前端向服务器根据现场情况申请数据,就用到了 JS 发送网页请求的技术。
JS 有多重方式可以实现发送 网页请求的功能,我这里记录最方便简单的 —— 基于JQuery 和 form 的GET/POST数据提交。
JQuery
- JQuery是一个快速、简洁的JavaScript框架。
- JQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
-
JQuery
封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。JQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0 、FF 1.5 、Safari 2.0 、Opera 9.0 等。
请求格式
$.get(url, data, callback)
参数 | 描述 |
---|---|
url | 必需,规定您需要请求的URL |
data | 可选,规定连同请求发送到服务器的数据,格式是json |
callback | 可选,回掉函数,当请求成功时运行的函数 |
$.post(url, data, callback)
参数 | 描述 |
---|---|
url | 必需,规定您需要请求的URL |
data | 可选,规定连同请求发送到服务器的数据,格式是json |
callback | 可选,回掉函数,当请求成功时运行的函数 |
使用方法
首先,在需要调用JQuery的页面里,用script标签导入Jquery文件,例如:
1 | <script src="static/js/jquery-3.2.1.min.js"></script> |
---|
然后,网页空白的地方,申明你的方法以及需要传递的参数,你可以这样做:
123456789 | <script> function doPost(url) { var val1 = document.getElementsByName("key1").value; var val2 = document.getElementsByName("key2").value; $.post(url, {'key1':val1, 'key2':val2}); } </script> |
---|
接着,在你的input/button标签或者需要发送数据的地方,增加一个onclick的属性,例如:
123 | ... <input type="button" value="submit" onclick="doPost('/')" /> ... |
---|
jquery 源码
附上我正在使用的 jquery 代码,有需要的伙伴可以直接拿去用。
jquery 源码
12 | /*! jQuery v3.5.1 | (c) JS Foundation and other contributors | jquery.org/license */!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e "":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.5.1",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}S.fn=S.prototype={jquery:f,constructor:S,length:0,toArray:function(){return s.call(this)},get:function(e){return null==e?s.call(this):e<0?this[e this.length]:this[e]},pushStack:function(e){var t=S.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return S.each(this,e)},map:function(n){return this.pushStack(S.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(s.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(S.grep(this,function(e,t){return(t 1)%2}))},odd:function(){return this.pushStack(S.grep(this,function(e,t){return t%2}))},eq:function(e){var t=this.length,n= e (e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},S.extend=S.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s ),"object"==typeof a||m(a)||(a={}),s===u&&(a=this,s--);s<u;s )if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(S.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||S.isPlainObject(n)?n:{},i=!1,a[t]=S.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},S.extend({expando:"jQuery" (f Math.random()).replace(/D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==o.call(e))&&(!(t=r(e))||"function"==typeof(n=v.call(t,"constructor")&&t.constructor)&&a.call(n)===l)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t,n){b(e,{nonce:t&&t.nonce},n)},each:function(e,t){var n,r=0;if(p(e)){for(n=e.length;r<n;r )if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},makeArray:function(e,t){var n=t||[];return null!=e&&(p(Object(e))?S.merge(n,"string"==typeof e?[e]:e):u.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:i.call(t,e,n)},merge:function(e,t){for(var n= t.length,r=0,i=e.length;r<n;r )e[i ]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i )!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(p(e))for(r=e.length;o<r;o )null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return g(a)},guid:1,support:y}),"function"==typeof Symbol&&(S.fn[Symbol.iterator]=t[Symbol.iterator]),S.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object " t "]"]=t.toLowerCase()});var d=function(n){var e,d,b,o,i,h,f,g,w,u,l,T,C,a,E,v,s,c,y,S="sizzle" 1*new Date,p=n.document,k=0,r=0,m=ue(),x=ue(),A=ue(),N=ue(),D=function(e,t){return e===t&&(l=!0),0},j={}.hasOwnProperty,t=[],q=t.pop,L=t.push,H=t.push,O=t.slice,P=function(e,t){for(var n=0,r=e.length;n<r;n )if(e[n]===t)return n;return-1},R="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",M="[\x20\t\r\n\f]",I="(?:\\[\da-fA-F]{1,6}" M "?|\\[^\r\n\f]|[\w-]|[^ -\x7f]) ",W="\[" M "*(" I ")(?:" M "*([*^$|!~]?=)" M "*(?:'((?:\\.|[^\\'])*)'|"((?:\\.|[^\\"])*)"|(" I "))|)" M "*\]",F=":(" I ")(?:\((('((?:\\.|[^\\'])*)'|"((?:\\.|[^\\"])*)")|((?:\\.|[^\\()[\]]|" W ")*)|.*)\)|)",B=new RegExp(M " ","g"),$=new RegExp("^" M " |((?:^|[^\\])(?:\\.)*)" M " $","g"),_=new RegExp("^" M "*," M "*"),z=new RegExp("^" M "*([> ~]|" M ")" M "*"),U=new RegExp(M "|>"),X=new RegExp(F),V=new RegExp("^" I "$"),G={ID:new RegExp("^#(" I ")"),CLASS:new RegExp("^\.(" I ")"),TAG:new RegExp("^(" I "|[*])"),ATTR:new RegExp("^" W),PSEUDO:new RegExp("^" F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\(" M "*(even|odd|(([ -]|)(\d*)n|)" M "*(?:([ -]|)" M "*(\d )|))" M "*\)|)","i"),bool:new RegExp("^(?:" R ")$","i"),needsContext:new RegExp("^" M "*[> ~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\(" M "*((?:-\d)?\d*)" M "*\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^hd$/i,K=/^[^{] {s*[native w/,Z=/^(?:#([w-] )|(w )|.([w-] ))$/,ee=/[ ~]/,te=new RegExp("\\[\da-fA-F]{1,6}" M "?|\\([^\r\n\f])","g"),ne=function(e,t){var n="0x" e.slice(1)-65536;return t||(n<0?String.fromCharCode(n 65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([ -x1fx7f]|^-?d)|^-$|[^ -x1fx7f-uFFFFw-]/g,ie=function(e,t){return t?" |
---|