ajax的几种便捷访问服务器的方式,简单省心的ajax后台访问
今天来聊聊ajax的简单访问方式,当然你必须要导入JQuery.js的包,
第一种 : $.post
这里的ps可以是一个表单的序列,也就是表格里面所有包含name的参数,都会在访问时传入后台。
var ps = $("#submit_form").serialize(); 该操作即是将表单内容序列化为字符串。
当然如果你不想使用ps,想使用另外一种方式也是可以的:将 ps 替换为 { "name" : "value1 , "name2" : value2} 。
如同这种格式传参也是OK的,当然,具体哪种看实际需求。
[code]$.post("/URL", ps, function(data) { if (data){ alert("You datas : " + data); } else { alert("失败"); } });
方法等价于:
[code]$.ajax({ type : 'POST', url : "/URL", success : function(data) { if (data){ alert("You datas : " + data); } else { alert("失败"); } } });
第二种 $.getJSON
方法特点: 相信大家看到名字就知道是干嘛的了,没错就是访问后台然后拿到JSON字符串的代码,
对比于仅仅指定ajax的$.ajax设置很多多余的代码是不是简单很多了呢?
[code]$.getJSON("/URL",args,function(result, status) { console.log(result) });
方法等价于:
[code]$.ajax({ type : 'POST', url : "/URL", dataType : 'json', success : function(result) { console.log(result)//打印返回值 } });
第三种 :$.getScript()
通过 HTTP GET 请求载入并执行 JavaScript 文件。
语法: url :将要请求的 URL 字符串。(路径)
success : 可选。规定请求成功后执行的回调函数。
额外的参数:
- response - 包含来自请求的结果数据
- status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
[code]jQuery.getScript(url,success(response,status))
举列代码:
[code]$("button").click(function(){ $.getScript("demo_ajax_script.js"); });
等价于:
[code]$.ajax({ url: url, dataType: "script", success: success });
第四种:ajaxSubmit()提供了一种使用AJAX立即提交HTML表单的机制。这种方法挺棒的。
需要导入辅助JS:为了不影响阅读 ,该JS代码块在文章最底层
[code]$("#loginForm").ajaxSubmit(function(data) { if (data) { window.location.href = "/index.html"; } else { alert("登录失败!"); } })
ajax一些其他的信息:
以下数据来源于 : jQuery 参考手册 - Ajax
jQuery Ajax 操作函数
jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。
函数 | 描述 |
---|---|
jQuery.ajax() | 执行异步 HTTP (Ajax) 请求。 |
.ajaxComplete() | 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
.ajaxError() | 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。 |
.ajaxSend() | 在 Ajax 请求发送之前显示一条消息。 |
jQuery.ajaxSetup() | 设置将来的 Ajax 请求的默认值。 |
.ajaxStart() | 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。 |
.ajaxStop() | 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
.ajaxSuccess() | 当 Ajax 请求成功完成时显示一条消息。 |
jQuery.get() | 使用 HTTP GET 请求从服务器加载数据。 |
jQuery.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码数据。 |
jQuery.getScript() | 使用 HTTP GET 请求从服务器加载 JavaScript 文件,然后执行该文件。 |
.load() | 从服务器加载数据,然后把返回到 HTML 放入匹配元素。 |
jQuery.param() | 创建数组或对象的序列化表示,适合在 URL 查询字符串或 Ajax 请求中使用。 |
jQuery.post() | 使用 HTTP POST 请求从服务器加载数据。 |
.serialize() | 将表单内容序列化为字符串。 |
.serializeArray() | 序列化表单元素,返回 JSON 数据结构数据。 |
表单提交辅助JS:copy到 js里然后 Ctrl + Shift + F 格式化一次就OK了。
PS: 如果你不知道怎么创建JS文件,可以查阅我之前的博客。
链接:https://blog.csdn.net/qq_43227967/article/details/82832799
[code]/*! * jQuery Form Plugin * version: 3.51.0-2014.06.20 * Requires jQuery v1.5 or later * Copyright (c) 2014 M. Alsup * Examples and documentation at: http://malsup.com/jquery/form/ * Project repository: https://github.com/malsup/form * Dual licensed under the MIT and GPL licenses. * https://github.com/malsup/form#copyright-and-license */ /*global ActiveXObject */ // AMD support (function(factory) { "use strict"; if (typeof define === 'function' && define.amd) { // using AMD; register as anon module define([ 'jquery' ], factory); } else { // no AMD; invoke directly factory((typeof (jQuery) != 'undefined') ? jQuery : window.Zepto); } } (function($) { "use strict"; /* * Usage Note: ----------- Do not use both ajaxSubmit and ajaxForm * on the same form. These functions are mutually exclusive. Use * ajaxSubmit if you want to bind your own submit handler to the * form. For example, * * $(document).ready(function() { $('#myForm').on('submit', * function(e) { e.preventDefault(); // <-- important * $(this).ajaxSubmit({ target: '#output' }); }); }); * * Use ajaxForm when you want the plugin to manage all the event * binding for you. For example, * * $(document).ready(function() { $('#myForm').ajaxForm({ target: * '#output' }); }); * * You can also use ajaxForm with delegation (requires jQuery * v1.7+), so the form does not have to exist when you invoke * ajaxForm: * * $('#myForm').ajaxForm({ delegation: true, target: '#output' }); * * When using ajaxForm, the ajaxSubmit function will be invoked for * you at the appropriate time. */ /** * Feature detection */ var feature = {}; feature.fileapi = $("<input type='file'/>").get(0).files !== undefined; feature.formdata = window.FormData !== undefined; var hasProp = !!$.fn.prop; // attr2 uses prop when it can but checks the return type for // an expected string. this accounts for the case where a form // contains inputs with names like "action" or "method"; in those // cases "prop" returns the element $.fn.attr2 = function() { if (!hasProp) { return this.attr.apply(this, arguments); } var val = this.prop.apply(this, arguments); if ((val && val.jquery) || typeof val === 'string') { return val; } return this.attr.apply(this, arguments); }; /** * ajaxSubmit() provides a mechanism for immediately submitting an * HTML form using AJAX. */ $.fn.ajaxSubmit = function(options) { /* jshint scripturl:true */ // fast fail if nothing selected // (http://dev.jquery.com/ticket/2752) if (!this.length) { log('ajaxSubmit: skipping submit process - no element selected'); return this; } var method, action, url, $form = this; if (typeof options == 'function') { options = { success : options }; } else if (options === undefined) { options = {}; } method = options.type || this.attr2('method'); action = options.url || this.attr2('action'); url = (typeof action === 'string') ? $.trim(action) : ''; url = url || window.location.href || ''; if (url) { // clean url (don't include hash vaue) url = (url.match(/^([^#]+)/) || [])[1]; } options = $.extend(true, { url : url, success : $.ajaxSettings.success, type : method || $.ajaxSettings.type, iframeSrc : /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank' }, options); // hook for manipulating the form data before it is extracted; // convenient for use with rich editors like tinyMCE or // FCKEditor var veto = {}; this.trigger('form-pre-serialize', [ this, options, veto ]); if (veto.veto) { log('ajaxSubmit: submit vetoed via form-pre-serialize trigger'); return this; } // provide opportunity to alter form data before it is // serialized if (options.beforeSerialize && options.beforeSerialize(this, options) === false) { log('ajaxSubmit: submit aborted via beforeSerialize callback'); return this; } var traditional = options.traditional; if (traditional === undefined) { traditional = $.ajaxSettings.traditional; } var elements = []; var qx, a = this.formToArray(options.semantic, elements); if (options.data) { options.extraData = options.data; qx = $.param(options.data, traditional); } // give pre-submit callback an opportunity to abort the submit if (options.beforeSubmit && options.beforeSubmit(a, this, options) === false) { log('ajaxSubmit: submit aborted via beforeSubmit callback'); return this; } // fire vetoable 'validate' event this .trigger('form-submit-validate', [ a, this, options, veto ]); if (veto.veto) { log('ajaxSubmit: submit vetoed via form-submit-validate trigger'); return this; } var q = $.param(a, traditional); if (qx) { q = (q ? (q + '&' + qx) : qx); } if (options.type.toUpperCase() == 'GET') { options.url += (options.url.indexOf('?') >= 0 ? '&' : '?') + q; options.data = null; // data is null for 'get' } else { options.data = q; // data is the query string for 'post' } var callbacks = []; if (options.resetForm) { callbacks.push(function() { $form.resetForm(); }); } if (options.clearForm) { callbacks.push(function() { $form.clearForm(options.includeHidden); }); } // perform a load on the target only if dataType is not provided if (!options.dataType && options.target) { var oldSuccess = options.success || function() { }; callbacks .push(function(data) { var fn = options.replaceTarget ? 'replaceWith' : 'html'; $(options.target)[fn](data).each(oldSuccess, arguments); }); } else if (options.success) { callbacks.push(options.success); } options.success = function(data, status, xhr) { // jQuery 1.4+ // passes xhr as // 3rd arg var context = options.context || this; // jQuery 1.4+ // supports scope // context for (var i = 0, max = callbacks.length; i < max; i++) { callbacks[i].apply(context, [ data, status, xhr || $form, $form ]); } }; if (options.error) { var oldError = options.error; options.error = function(xhr, status, error) { var context = options.context || this; oldError.apply(context, [ xhr, status, error, $form ]); }; } if (options.complete) { var oldComplete = options.complete; options.complete = function(xhr, status) { var context = options.context || this; oldComplete.apply(context, [ xhr, status, $form ]); }; } // are there files to upload? // [value] (issue #113), also see comment: // https://github.com/malsup/form/commit/588306aedba1de01388032d5f42a60159eea9228#commitcomment-2180219 var fileInputs = $('input[type=file]:enabled', this).filter( function() { return $(this).val() !== ''; }); var hasFileInputs = fileInputs.length > 0; var mp = 'multipart/form-data'; var multipart = ($form.attr('enctype') == mp || $form .attr('encoding') == mp); var fileAPI = feature.fileapi && feature.formdata; log("fileAPI :" + fileAPI); var shouldUseFrame = (hasFileInputs || multipart) && !fileAPI; var jqxhr; // options.iframe allows user to force iframe mode // 06-NOV-09: now defaulting to iframe mode if file input is // detected if (options.iframe !== false && (options.iframe || shouldUseFrame)) { // hack to fix Safari hang (thanks to Tim Molendijk for // this) // see: // http://groups.google.com/group/jquery-dev/browse_thread/thread/36395b7ab510dd5d if (options.closeKeepAlive) { $.get(options.closeKeepAlive, function() { jqxhr = fileUploadIframe(a); }); } else { jqxhr = fileUploadIframe(a); } } else if ((hasFileInputs || multipart) && fileAPI) { jqxhr = fileUploadXhr(a); } else { jqxhr = $.ajax(options); } $form.removeData('jqxhr').data('jqxhr', jqxhr); // clear element array for (var k = 0; k < elements.length; k++) { elements[k] = null; } // fire 'notify' event this.trigger('form-submit-notify', [ this, options ]); return this; // utility fn for deep serialization function deepSerialize(extraData) { var serialized = $.param(extraData, options.traditional) .split('&'); var len = serialized.length; var result = []; var i, part; for (i = 0; i < len; i++) { // #252; undo param space replacement serialized[i] = serialized[i].replace(/\+/g, ' '); part = serialized[i].split('='); // #278; use array instead of object storage, favoring // array serializations result.push([ decodeURIComponent(part[0]), decodeURIComponent(part[1]) ]); } return result; } // XMLHttpRequest Level 2 file uploads (big hat tip to // francois2metz) function fileUploadXhr(a) { var formdata = new FormData(); for (var i = 0; i < a.length; i++) { formdata.append(a[i].name, a[i].value); } if (options.extraData) { var serializedData = deepSerialize(options.extraData); for (i = 0; i < serializedData.length; i++) { if (serializedData[i]) { formdata.append(serializedData[i][0], serializedData[i][1]); } } } options.data = null; var s = $.extend(true, {}, $.ajaxSettings, options, { contentType : false, processData : false, cache : false, type : method || 'POST' }); if (options.uploadProgress) { // workaround because jqXHR does not expose upload // property s.xhr = function() { var xhr = $.ajaxSettings.xhr(); if (xhr.upload) { xhr.upload.addEventListener('progress', function(event) { var percent = 0; var position = event.loaded || event.position; /* * event.position * is * deprecated */ var total = event.total; if (event.lengthComputable) { percent = Math.ceil(position / total * 100); } options.uploadProgress(event, position, total, percent); }, false); } return xhr; }; } s.data = null; var beforeSend = s.beforeSend; s.beforeSend = function(xhr, o) { // Send FormData() provided by user if (options.formData) { o.data = options.formData; } else { o.data = formdata; } if (beforeSend) { beforeSend.call(this, xhr, o); } }; return $.ajax(s); } // private function for handling file uploads (hat tip to // YAHOO!) function fileUploadIframe(a) { var form = $form[0], el, i, s, g, id, $io, io, xhr, sub, n, timedOut, timeoutHandle; var deferred = $.Deferred(); // #341 deferred.abort = function(status) { xhr.abort(status); }; if (a) { // ensure that every serialized input is still enabled for (i = 0; i < elements.length; i++) { el = $(elements[i]); if (hasProp) { el.prop('disabled', false); } else { el.removeAttr('disabled'); } } } s = $.extend(true, {}, $.ajaxSettings, options); s.context = s.context || s; id = 'jqFormIO' + (new Date().getTime()); if (s.iframeTarget) { $io = $(s.iframeTarget); n = $io.attr2('name'); if (!n) { $io.attr2('name', id); } else { id = n; } } else { $io = $('<iframe name="' + id + '" src="' + s.iframeSrc + '" />'); $io.css({ position : 'absolute', top : '-1000px', left : '-1000px' }); } io = $io[0]; xhr = { // mock object aborted : 0, responseText : null, responseXML : null, status : 0, statusText : 'n/a', getAllResponseHeaders : function() { }, getResponseHeader : function() { }, setRequestHeader : function() { }, abort : function(status) { var e = (status === 'timeout' ? 'timeout' : 'aborted'); log('aborting upload... ' + e); this.aborted = 1; try { // #214, #257 if (io.contentWindow.document.execCommand) { io.contentWindow.document .execCommand('Stop'); } } catch (ignore) { } $io.attr('src', s.iframeSrc); // abort op in // progress xhr.error = e; if (s.error) { s.error.call(s.context, xhr, e, status); } if (g) { $.event.trigger("ajaxError", [ xhr, s, e ]); } if (s.complete) { s.complete.call(s.context, xhr, e); } } }; g = s.global; // trigger ajax global events so that activity/block // indicators work like normal if (g && 0 === $.active++) { $.event.trigger("ajaxStart"); } if (g) { $.event.trigger("ajaxSend", [ xhr, s ]); } if (s.beforeSend && s.beforeSend.call(s.context, xhr, s) === false) { if (s.global) { $.active--; } deferred.reject(); return deferred; } if (xhr.aborted) { deferred.reject(); return deferred; } // add submitting element to data if we know it sub = form.clk; if (sub) { n = sub.name; if (n && !sub.disabled) { s.extraData = s.extraData || {}; s.extraData = sub.value; if (sub.type == "image") { s.extraData[n + '.x'] = form.clk_x; s.extraData[n + '.y'] = form.clk_y; } } } var CLIENT_TIMEOUT_ABORT = 1; var SERVER_ABORT = 2; function getDoc(frame) { /* * it looks like contentWindow or contentDocument do not * carry the protocol property in ie8, when running * under ssl frame.document is the only valid response * document, since the protocol is know but not on the * other two objects. strange? "Same origin policy" * http://en.wikipedia.org/wiki/Same_origin_policy */ var doc = null; // IE8 cascading access check try { if (frame.contentWindow) { doc = frame.contentWindow.document; } } catch (err) { // IE8 access denied under ssl & missing protocol log('cannot get iframe.contentWindow document: ' + err); } if (doc) { // successful getting content return doc; } try { // simply checking may throw in ie8 under ssl or // mismatched protocol doc = frame.contentDocument ? frame.contentDocument : frame.document; } catch (err) { // last attempt log('cannot get iframe.contentDocument: ' + err); doc = frame.document; } return doc; } // Rails CSRF hack (thanks to Yvan Barthelemy) var csrf_token = $('meta[name=csrf-token]').attr('content'); var csrf_param = $('meta[name=csrf-param]').attr('content'); if (csrf_param && csrf_token) { s.extraData = s.extraData || {}; s.extraData[csrf_param] = csrf_token; } // take a breath so that pending repaints get some cpu time // before the upload starts function doSubmit() { // make sure form attrs are set var t = $form.attr2('target'), a = $form .attr2('action'), mp = 'multipart/form-data', et = $form .attr('enctype') || $form.attr('encoding') || mp; // update form attrs in IE friendly way form.setAttribute('target', id); if (!method || /post/i.test(method)) { form.setAttribute('method', 'POST'); } if (a != s.url) { form.setAttribute('action', s.url); } // ie borks in some cases when setting encoding if (!s.skipEncodingOverride && (!method || /post/i.test(method))) { $form.attr({ encoding : 'multipart/form-data', enctype : 'multipart/form-data' }); } // support timout if (s.timeout) { timeoutHandle = setTimeout(function() { timedOut = true; cb(CLIENT_TIMEOUT_ABORT); }, s.timeout); } // look for server aborts function checkState() { try { var state = getDoc(io).readyState; log('state = ' + state); if (state && state.toLowerCase() == 'uninitialized') { setTimeout(checkState, 50); } } catch (e) { log('Server abort: ', e, ' (', e.name, ')'); cb(SERVER_ABORT); if (timeoutHandle) { clearTimeout(timeoutHandle); } timeoutHandle = undefined; } } // add "extra" data to form if provided in options var extraInputs = []; try { if (s.extraData) { for ( var n in s.extraData) { if (s.extraData.hasOwnProperty(n)) { // if using the $.param format that // allows for multiple values with the // same name if ($.isPlainObject(s.extraData ) && s.extraData .hasOwnProperty('name') && s.extraData .hasOwnProperty('value')) { extraInputs .push($( '<input type="hidden" name="' + s.extraData .name + '">') .val( s.extraData .value) .appendTo(form)[0]); } else { extraInputs.push($( '<input type="hidden" name="' + n + '">').val( s.extraData ).appendTo( form)[0]); } } } } if (!s.iframeTarget) { // add iframe to doc and submit the form $io.appendTo('body'); } if (io.attachEvent) { io.attachEvent('onload', cb); } else { io.addEventListener('load', cb, false); } setTimeout(checkState, 15); try { form.submit(); } catch (err) { // just in case form has element with name/id of // 'submit' var submitFn = document.createElement('form').submit; submitFn.apply(form); } } finally { // reset attrs and remove "extra" input elements form.setAttribute('action', a); form.setAttribute('enctype', et); // #380 if (t) { form.setAttribute('target', t); } else { $form.removeAttr('target'); } $(extraInputs).remove(); } } if (s.forceSync) { doSubmit(); } else { setTimeout(doSubmit, 10); // this lets dom updates // render } var data, doc, domCheckCount = 50, callbackProcessed; function cb(e) { if (xhr.aborted || callbackProcessed) { return; } doc = getDoc(io); if (!doc) { log('cannot access response document'); e = SERVER_ABORT; } if (e === CLIENT_TIMEOUT_ABORT && xhr) { xhr.abort('timeout'); deferred.reject(xhr, 'timeout'); return; } else if (e == SERVER_ABORT && xhr) { xhr.abort('server abort'); deferred.reject(xhr, 'error', 'server abort'); return; } if (!doc || doc.location.href == s.iframeSrc) { // response not received yet if (!timedOut) { return; } } if (io.detachEvent) { io.detachEvent('onload', cb); } else { io.removeEventListener('load', cb, false); } var status = 'success', errMsg; try { if (timedOut) { throw 'timeout'; } var isXml = s.dataType == 'xml' || doc.XMLDocument || $.isXMLDoc(doc); log('isXml=' + isXml); if (!isXml && window.opera && (doc.body === null || !doc.body.innerHTML)) { if (--domCheckCount) { // in some browsers (Opera) the iframe DOM // is not always traversable when // the onload callback fires, so we loop a // bit to accommodate log('requeing onLoad callback, DOM not available'); setTimeout(cb, 250); return; } // let this fall through because server response // could be an empty document // log('Could not access iframe DOM after // mutiple tries.'); // throw 'DOMException: not available'; } // log('response detected'); var docRoot = doc.body ? doc.body : doc.documentElement; xhr.responseText = docRoot ? docRoot.innerHTML : null; xhr.responseXML = doc.XMLDocument ? doc.XMLDocument : doc; if (isXml) { s.dataType = 'xml'; } xhr.getResponseHeader = function(header) { var headers = { 'content-type' : s.dataType }; return headers[header.toLowerCase()]; }; // support for XHR 'status' & 'statusText' emulation // : if (docRoot) { xhr.status = Number(docRoot .getAttribute('status')) || xhr.status; xhr.statusText = docRoot .getAttribute('statusText') || xhr.statusText; } var dt = (s.dataType || '').toLowerCase(); var scr = /(json|script|text)/.test(dt); if (scr || s.textarea) { // see if user embedded response in textarea var ta = doc.getElementsByTagName('textarea')[0]; if (ta) { xhr.responseText = ta.value; // support for XHR 'status' & 'statusText' // emulation : xhr.status = Number(ta .getAttribute('status')) || xhr.status; xhr.statusText = ta .getAttribute('statusText') || xhr.statusText; } else if (scr) { // account for browsers injecting pre around // json response var pre = doc.getElementsByTagName('pre')[0]; var b = doc.getElementsByTagName('body')[0]; if (pre) { xhr.responseText = pre.textContent ? pre.textContent : pre.innerText; } else if (b) { xhr.responseText = b.textContent ? b.textContent : b.innerText; } } } else if (dt == 'xml' && !xhr.responseXML && xhr.responseText) { xhr.responseXML = toXml(xhr.responseText); } try { data = httpData(xhr, dt, s); } catch (err) { status = 'parsererror'; xhr.error = errMsg = (err || status); } } catch (err) { log('error caught: ', err); status = 'error'; xhr.error = errMsg = (err || status); } if (xhr.aborted) { log('upload aborted'); status = null; } if (xhr.status) { // we've set xhr.status status = (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) ? 'success' : 'error'; } // ordering of these callbacks/triggers is odd, but // that's how $.ajax does it if (status === 'success') { if (s.success) { s.success.call(s.context, data, 'success', xhr); } deferred.resolve(xhr.responseText, 'success', xhr); if (g) { $.event.trigger("ajaxSuccess", [ xhr, s ]); } } else if (status) { if (errMsg === undefined) { errMsg = xhr.statusText; } if (s.error) { s.error.call(s.context, xhr, status, errMsg); } deferred.reject(xhr, 'error', errMsg); if (g) { $.event .trigger("ajaxError", [ xhr, s, errMsg ]); } } if (g) { $.event.trigger("ajaxComplete", [ xhr, s ]); } if (g && !--$.active) { $.event.trigger("ajaxStop"); } if (s.complete) { s.complete.call(s.context, xhr, status); } callbackProcessed = true; if (s.timeout) { clearTimeout(timeoutHandle); } // clean up setTimeout(function() { if (!s.iframeTarget) { $io.remove(); } else { // adding else to clean up existing // iframe response. $io.attr('src', s.iframeSrc); } xhr.responseXML = null; }, 100); } var toXml = $.parseXML || function(s, doc) { // use parseXML if available // (jQuery 1.5+) if (window.ActiveXObject) { doc = new ActiveXObject('Microsoft.XMLDOM'); doc.async = 'false'; doc.loadXML(s); } else { doc = (new DOMParser()).parseFromString(s, 'text/xml'); } return (doc && doc.documentElement && doc.documentElement.nodeName != 'parsererror') ? doc : null; }; var parseJSON = $.parseJSON || function(s) { /* jslint evil:true */ return window['eval']('(' + s + ')'); }; var httpData = function(xhr, type, s) { // mostly lifted // from jq1.4.4 var ct = xhr.getResponseHeader('content-type') || '', xml = type === 'xml' || !type && ct.indexOf('xml') >= 0, data = xml ? xhr.responseXML : xhr.responseText; if (xml && data.documentElement.nodeName === 'parsererror') { if ($.error) { $.error('parsererror'); } } if (s && s.dataFilter) { data = s.dataFilter(data, type); } if (typeof data === 'string') { if (type === 'json' || !type && ct.indexOf('json') >= 0) { data = parseJSON(data); } else if (type === "script" || !type && ct.indexOf("javascript") >= 0) { $.globalEval(data); } } return data; }; return deferred; } }; /** * ajaxForm() provides a mechanism for fully automating form * submission. * * The advantages of using this method instead of ajaxSubmit() are: * * 1: This method will include coordinates for <input type="image" /> * elements (if the element is used to submit the form). 2. This * method will include the submit element's name/value data (for the * element that was used to submit the form). 3. This method binds * the submit() method to the form for you. * * The options argument for ajaxForm works exactly as it does for * ajaxSubmit. ajaxForm merely passes the options argument along * after properly binding events for submit elements and the form * itself. */ $.fn.ajaxForm = function(options) { options = options || {}; options.delegation = options.delegation && $.isFunction($.fn.on); // in jQuery 1.3+ we can fix mistakes with the ready state if (!options.delegation && this.length === 0) { var o = { s : this.selector, c : this.context }; if (!$.isReady && o.s) { log('DOM not ready, queuing ajaxForm'); $(function() { $(o.s, o.c).ajaxForm(options); }); return this; } // is your DOM ready? // http://docs.jquery.com/Tutorials:Introducing_$(document).ready() log('terminating; zero elements found by selector' + ($.isReady ? '' : ' (DOM not ready)')); return this; } if (options.delegation) { $(document).off('submit.form-plugin', this.selector, doAjaxSubmit).off('click.form-plugin', this.selector, captureSubmittingElement).on( 'submit.form-plugin', this.selector, options, doAjaxSubmit).on('click.form-plugin', this.selector, options, captureSubmittingElement); return this; } return this.ajaxFormUnbind().bind('submit.form-plugin', options, doAjaxSubmit).bind('click.form-plugin', options, captureSubmittingElement); }; // private event handlers function doAjaxSubmit(e) { /* jshint validthis:true */ var options = e.data; if (!e.isDefaultPrevented()) { // if event has been canceled, // don't proceed e.preventDefault(); $(e.target).ajaxSubmit(options); // #365 } } function captureSubmittingElement(e) { /* jshint validthis:true */ var target = e.target; var $el = $(target); if (!($el.is("[type=submit],[type=image]"))) { // is this a child element of the submit el? (ex: a span // within a button) var t = $el.closest('[type=submit]'); if (t.length === 0) { return; } target = t[0]; } var form = this; form.clk = target; if (target.type == 'image') { if (e.offsetX !== undefined) { form.clk_x = e.offsetX; form.clk_y = e.offsetY; } else if (typeof $.fn.offset == 'function') { var offset = $el.offset(); form.clk_x = e.pageX - offset.left; form.clk_y = e.pageY - offset.top; } else { form.clk_x = e.pageX - target.offsetLeft; form.clk_y = e.pageY - target.offsetTop; } } // clear form vars setTimeout(function() { form.clk = form.clk_x = form.clk_y = null; }, 100); } // ajaxFormUnbind unbinds the event handlers that were bound by // ajaxForm $.fn.ajaxFormUnbind = function() { return this.unbind('submit.form-plugin click.form-plugin'); }; /** * formToArray() gathers form element data into an array of objects * that can be passed to any of the following ajax functions: $.get, * $.post, or load. Each object in the array has both a 'name' and * 'value' property. An example of an array for a simple login form * might be: * [ { name: 'username', value: 'jresig' }, { name: 'password', * value: 'secret' } ] * * It is this array that is passed to pre-submit callback functions * provided to the ajaxSubmit() and ajaxForm() methods. */ $.fn.formToArray = function(semantic, elements) { var a = []; if (this.length === 0) { return a; } var form = this[0]; var formId = this.attr('id'); var els = semantic ? form.getElementsByTagName('*') : form.elements; var els2; if (els && !/MSIE [678]/.test(navigator.userAgent)) { // #390 els = $(els).get(); // convert to standard array } // #386; account for inputs outside the form which use the // 'form' attribute if (formId) { els2 = $(':input[form="' + formId + '"]').get(); // hat // tip // @thet if (els2.length) { els = (els || []).concat(els2); } } if (!els || !els.length) { return a; } var i, j, n, v, el, max, jmax; for (i = 0, max = els.length; i < max; i++) { el = els[i]; n = el.name; if (!n || el.disabled) { continue; } if (semantic && form.clk && el.type == "image") { // handle image inputs on the fly when semantic == true if (form.clk == el) { a.push({ name : n, value : $(el).val(), type : el.type }); a.push({ name : n + '.x', value : form.clk_x }, { name : n + '.y', value : form.clk_y }); } continue; } v = $.fieldValue(el, true); if (v && v.constructor == Array) { if (elements) { elements.push(el); } for (j = 0, jmax = v.length; j < jmax; j++) { a.push({ name : n, value : v[j] }); } } else if (feature.fileapi && el.type == 'file') { if (elements) { elements.push(el); } var files = el.files; if (files.length) { for (j = 0; j < files.length; j++) { a.push({ name : n, value : files[j], type : el.type }); } } else { // #180 a.push({ name : n, value : '', type : el.type }); } } else if (v !== null && typeof v != 'undefined') { if (elements) { elements.push(el); } a.push({ name : n, value : v, type : el.type, required : el.required }); } } if (!semantic && form.clk) { // input type=='image' are not found in elements array! // handle it here var $input = $(form.clk), input = $input[0]; n = input.name; if (n && !input.disabled && input.type == 'image') { a.push({ name : n, value : $input.val() }); a.push({ name : n + '.x', value : form.clk_x }, { name : n + '.y', value : form.clk_y }); } } return a; }; /** * Serializes form data into a 'submittable' string. This method * will return a string in the format: name1=value1&name2=value2 */ $.fn.formSerialize = function(semantic) { // hand off to jQuery.param for proper encoding return $.param(this.formToArray(semantic)); }; /** * Serializes all field elements in the jQuery object into a query * string. This method will return a string in the format: * name1=value1&name2=value2 */ $.fn.fieldSerialize = function(successful) { var a = []; this.each(function() { var n = this.name; if (!n) { return; } var v = $.fieldValue(this, successful); if (v && v.constructor == Array) { for (var i = 0, max = v.length; i < max; i++) { a.push({ name : n, value : v[i] }); } } else if (v !== null && typeof v != 'undefined') { a.push({ name : this.name, value : v }); } }); // hand off to jQuery.param for proper encoding return $.param(a); }; /** * Returns the value(s) of the element in the matched set. For * example, consider the following form: * * <form><fieldset> <input name="A" type="text" /> <input name="A" * type="text" /> <input name="B" type="checkbox" value="B1" /> * <input name="B" type="checkbox" value="B2"/> <input name="C" * type="radio" value="C1" /> <input name="C" type="radio" * value="C2" /> </fieldset></form> * * var v = $('input[type=text]').fieldValue(); // if no values are * entered into the text inputs v == ['',''] // if values entered * into the text inputs are 'foo' and 'bar' v == ['foo','bar'] * * var v = $('input[type=checkbox]').fieldValue(); // if neither * checkbox is checked v === undefined // if both checkboxes are * checked v == ['B1', 'B2'] * * var v = $('input[type=radio]').fieldValue(); // if neither radio * is checked v === undefined // if first radio is checked v == * ['C1'] * * The successful argument controls whether or not the field element * must be 'successful' (per * http://www.w3.org/TR/html4/interact/forms.html#successful-controls). * The default value of the successful argument is true. If this * value is false the value(s) for each element is returned. * * Note: This method *always* returns an array. If no valid value * can be determined the array will be empty, otherwise it will * contain one or more values. */ $.fn.fieldValue = function(successful) { for (var val = [], i = 0, max = this.length; i < max; i++) { var el = this[i]; var v = $.fieldValue(el, successful); if (v === null || typeof v == 'undefined' || (v.constructor == Array && !v.length)) { continue; } if (v.constructor == Array) { $.merge(val, v); } else { val.push(v); } } return val; }; /** * Returns the value of the field element. */ $.fieldValue = function(el, successful) { var n = el.name, t = el.type, tag = el.tagName.toLowerCase(); if (successful === undefined) { successful = true; } if (successful && (!n || el.disabled || t == 'reset' || t == 'button' || (t == 'checkbox' || t == 'radio') && !el.checked || (t == 'submit' || t == 'image') && el.form && el.form.clk != el || tag == 'select' && el.selectedIndex == -1)) { return null; } if (tag == 'select') { var index = el.selectedIndex; if (index < 0) { return null; } var a = [], ops = el.options; var one = (t == 'select-one'); var max = (one ? index + 1 : ops.length); for (var i = (one ? index : 0); i < max; i++) { var op = ops[i]; if (op.selected) { var v = op.value; if (!v) { // extra pain for IE... v = (op.attributes && op.attributes.value && !(op.attributes.value.specified)) ? op.text : op.value; } if (one) { return v; } a.push(v); } } return a; } return $(el).val(); }; /** * Clears the form data. Takes the following actions on the form's * input fields: - input text fields will have their 'value' * property set to the empty string - select elements will have * their 'selectedIndex' property set to -1 - checkbox and radio * inputs will have their 'checked' property set to false - inputs * of type submit, button, reset, and hidden will *not* be effected - * button elements will *not* be effected */ $.fn.clearForm = function(includeHidden) { return this .each(function() { $('input,select,textarea', this).clearFields( includeHidden); }); }; /** * Clears the selected form elements. */ $.fn.clearFields = $.fn.clearInputs = function(includeHidden) { var re = /^(?:color|date|datetime|email|month|number|password|range|search|tel|text|time|url|week)$/i; // 'hidden' // is // not // in // this // list return this.each(function() { var t = this.type, tag = this.tagName.toLowerCase(); if (re.test(t) || tag == 'textarea') { this.value = ''; } else if (t == 'checkbox' || t == 'radio') { this.checked = false; } else if (tag == 'select') { this.selectedIndex = -1; } else if (t == "file") { if (/MSIE/.test(navigator.userAgent)) { $(this).replaceWith($(this).clone(true)); } else { $(this).val(''); } } else if (includeHidden) { // includeHidden can be the value true, or it can be a // selector string // indicating a special test; for example: // $('#myForm').clearForm('.special:hidden') // the above would clean hidden inputs that have the // class of 'special' if ((includeHidden === true && /hidden/.test(t)) || (typeof includeHidden == 'string' && $(this) .is(includeHidden))) { this.value = ''; } } }); }; /** * Resets the form data. Causes all form elements to be reset to * their original value. */ $.fn.resetForm = function() { return this .each(function() { // guard against an input with the name of 'reset' // note that IE reports the reset function as an // 'object' if (typeof this.reset == 'function' || (typeof this.reset == 'object' && !this.reset.nodeType)) { this.reset(); } }); }; /** * Enables or disables any matching elements. */ $.fn.enable = function(b) { if (b === undefined) { b = true; } return this.each(function() { this.disabled = !b; }); }; /** * Checks/unchecks any matching checkboxes or radio buttons and * selects/deselects and matching option elements. */ $.fn.selected = function(select) { if (select === undefined) { select = true; } return this.each(function() { var t = this.type; if (t == 'checkbox' || t == 'radio') { this.checked = select; } else if (this.tagName.toLowerCase() == 'option') { var $sel = $(this).parent('select'); if (select && $sel[0] && $sel[0].type == 'select-one') { // deselect all other options $sel.find('option').selected(false); } this.selected = select; } }); }; // expose debug var $.fn.ajaxSubmit.debug = false; // helper fn for console logging function log() { if (!$.fn.ajaxSubmit.debug) { return; } var msg = '[jquery.form] ' + Array.prototype.join.call(arguments, ''); if (window.console && window.console.log) { window.console.log(msg); } else if (window.opera && window.opera.postError) { window.opera.postError(msg); } } }));
阅读更多
- Ajax访问服务器的几种方式
- $.ajax()方法从服务器获取json数据几种方式详解
- springmvc前台向后台传值几种方式从简单到复杂
- 关于CAS服务端登录前ajax访问后台方法被拦截的配置-另外一种实现方式
- java中通过post方式访问后台服务器
- 手机android端的html5页面用ajax访问服务器,后台成功从数据库查询到值,但是前段一直调用ajax的error
- 前端提交数据/访问后端的几种方式:Ajax,form,触发,window.open()
- 在asp.net2.0中提供了新一代的数据访问工具--DataSource。它为简单的数据库开发提供了便捷的方式
- angular Js使用get方式ajax访问后台数据 非跨域访问
- 基于$.ajax()方法从服务器获取json数据的几种方式总结
- 利Android AQuery中ajax访问SSH搭建的后台Java Web服务器
- java后台设计简单的json数据接口,设置可跨域访问,前端ajax获取json数据
- $.ajax()方法从服务器获取json数据几种方式详解
- 用ajax向后台传参的几种方式
- java后台设计简单的json数据接口,设置可跨域访问,前端ajax获取json数据
- springmvc前台向后台传值几种方式总结(从简单到复杂)
- 哈哈,找到一种方式来简单模拟EXTJS中与服务器的AJAX交互啦。
- em 访问不正常 简单的几种方式
- 详解java中通过post方式访问后台服务器