博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AJAX 表单提交 文件上传
阅读量:5248 次
发布时间:2019-06-14

本文共 1585 字,大约阅读时间需要 5 分钟。

1. AJAX = 异步 JavaScript 和 XML。

  AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。提高用户体验度。

  主要是使用XMLHttpRequest 对象

请求状态readyState  0: 请求未初始化

          1: 服务器连接已建立  
          2: 请求已接收
          3: 请求处理中
          4: 请求已完成,且响应已就绪

2.Jquery 提供了对AJAX的封装。使用将简便了。开发更简单了。

$.ajax() $.get(), $.post()    $.post(){        urlString: 'test.action',//发送请求地址。        data: {"key":"value","key2","value2"},//或者使用$("#formId").serialize()序列化 (可选)Map待发送 Key/value 参数。        callback:function(){alert("OK!");},(可选)Function发送成功时回调函数。        //type (可选)String返回内容格式,xml, html, script, json, text, _default。        success:function(msg)        {            alert("success"+msg.data);//json        }        error:function(result)        {            alert("error!");        }    }

3当表单中存在file属性,需要用到文件上传时就会出问题了。这里需要用到jquery.form.js插件。

var mainform = $("#formId");    mainform.ajaxSubmit({                          type: 'post',                          url: "hello/formTest.action" ,                          beforeSend: function (a, b, c){$("#showMsg").value('正在保存数据中...');},//展示 “正在保存数据”                          complete: function (){ $("#showMsg").hide()},//隐藏 “正在保存数据”                          success: function(data){                               alert("success"+data.data);                          },                          error: function(result){                                alert("error");                          }                          });

 灵活运动ajax可以提高用户体验度。不过要传递数据量较大时最好不要使用。消耗时间太多反而体验变差。

转载于:https://www.cnblogs.com/stay-9527/p/3680169.html

你可能感兴趣的文章
linux php编译安装
查看>>
name phone email正则表达式
查看>>
重置GNOME-TERMINAL
查看>>
redis哨兵集群、docker入门
查看>>
hihoCoder 1233 : Boxes(盒子)
查看>>
codeforces水题100道 第二十二题 Codeforces Beta Round #89 (Div. 2) A. String Task (strings)
查看>>
c++||template
查看>>
[BZOJ 5323][Jxoi2018]游戏
查看>>
编程面试的10大算法概念汇总
查看>>
条件断点 符号断点
查看>>
水平垂直居中
查看>>
MySQL简介
查看>>
设计模式之桥接模式(Bridge)
查看>>
jquery的$(document).ready()和onload的加载顺序
查看>>
Python Web框架Django (五)
查看>>
.net学习之继承、里氏替换原则LSP、虚方法、多态、抽象类、Equals方法、接口、装箱拆箱、字符串------(转)...
查看>>
【codevs1033】 蚯蚓的游戏问题
查看>>
【程序执行原理】
查看>>
python的多行注释
查看>>
连接Oracle需要jar包和javadoc文档的下载
查看>>