Ajax 随手记

最新推荐文章于 2021-02-17 02:05:17 发布

AetherArtemis

最新推荐文章于 2021-02-17 02:05:17 发布

阅读量294

点赞数

本文链接：https://blog.csdn.net/ryuenkyo/article/details/106206476

版权

jquery ajax上传文件

例子：在页面上传一个csv文件，web服务器端用php解析上传的csv文件并入库
前端页面代码：

    <form enctype="multipart/form-data">
        <p>上传csv文件<input type="file" id="csv_file" name="csv_file"/></p>
        <button id="import">导入</button>
    </form>
    <script type="application/javascript">
        $("#import").click(function () {
            var files = $('#csv_file').prop('files');
            var data = new FormData();
            data.append('csv_file', files[0]);

            $.ajax({
                type: 'POST',
                url: "http://xxxx/import_csv",
                data: data,
                cache: false,
                processData: false,
                contentType: false,
                success: function (ret) {
                    alert(ret);
                }
            });
        });
    </script>

form的enctype必须是multipart/form-data才可以上传多个文件，ajax通过FormData来上传数据，ajax的cache、processData、contentType均要设置为false。
cache设为false是为了兼容ie8，防止ie8之前版本缓存get请求的处理方式。
contentType设置为false原因：https://segmentfault.com/a/1190000007207128。
processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

php代码：

            $uploadFile = $_FILES['csv_file'];
            $fileName = $uploadFile['tmp_name'];
            $fHandle = fopen($fileName, 'r');
            while ($data = fgetcsv($fHandle)) {
                //入库处理
            }
            fclose($fHandle);

php通过$_FILES读取上传的文件，通过tmp_name可以获取上传文件路径，通过fgetcsv函数读取csv文件数据

javaScript ajax动态创建html

var dataObj = data; //返回的result为json格式的数据
$.each(dataObj, function(index, item){
result += "<div><ul>";
result += "标题：</br>";
result += "<a href=";
result += "${pageContext.request.contextPath }/user/blogContents?id="+item.id;
result += ">"
result += item.title
result += "</a></br>";
result += "内容："+item.content+"</br>";
result += "发布人："+item.author+"</br>";
result += "发布时间："+item.createTime+"</ul></div>";
});
console.log(result); //可以在控制台打印一下看看，这是拼起来的标签和数据
//$("#prolist").html(result); //把内容入到这个div中即完成

// 为了测试，延迟1秒加载
setTimeout(function() {
$(".loadmore").remove();
$('.prolist').append(result);
page += 1;
finished = 0;
//最后一页
if (page == 10) {
sover = 1;
loadover();
}
}, 1000);
}
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
}
</script>

@ResponseBody
@RequestMapping(value = "/blogs", method = RequestMethod.GET, produces = "application/json")
public List<Blog> selectAllBlog(@RequestParam(required = false, defaultValue = "1") Integer page,
@RequestParam(required = false, defaultValue = "5") Integer rows) {
System.out.println(page);
System.out.println(rows);
ModelAndView mv = new ModelAndView();
PageHelper.startPage(page, rows);
List<Blog> list = blogService.selectAllBlog(page, rows);
PageInfo<Blog> pageInfo = new PageInfo<Blog>(list);
System.out.println("pageInfo=" + pageInfo);
List<Blog> blogs = pageInfo.getList();
for (int i = 0; i < blogs.size(); i++) {
System.out.println(blogs.get(i));
}
return blogs;
}

jQuery AJAX 方法 success()后台传来的4种数据

dream_heheda 2017-03-13 11:07:13 83381 收藏 16
展开
1.后台返回一个页面
js代码

/**(1)用$("#content-wrapper").html(data);显示页面*/
$.ajax({
async : false,
cache : false,
type : 'POST',
url : 'area/prepareCreate',
error : function() {
alert('smx失败 ');
},
success : function(data) {
$("#content-wrapper").html(data);
}
});

java代码

/*
* (1)不能有注解@RespoonseBody
* (2)返回值类型是String,代表页面所在的文件夹
* (3)如果返回"error"，执行ajax的error方法
*/
@RequestMapping(value = "area/prepareCreate", method = RequestMethod.POST)
public String editAreaWithFile() {
return "area/create;
// return "error";
}

2. 后台返回一个基本类型String,Long等
js代码

$.ajax({
async : false,
cache : false,
type : 'POST',
url : 'app/area/delete',
dataType : "json",
error : function() {
alert('smx失败 ');
},
success : function(data) {
/**重点：前台接收到返回值，直接处理就行*/
alert(data);
}

});

java代码

/**(1)用@ResponseBody注解
(2)可以接收各种参数，url，data(名称匹配或@RequestBody)
(3)返回值类型就是基本类型*/
@ResponseBody
@RequestMapping(value = "area/delete", method = RequestMethod.POST)
public long editArea() {
//处理参数
return 3;
}

3. 后台返回一个实体类
第一步：定义一个实体类

/**
* flag为1 :操作失败
* msg：失败原因；
* flag为0: 操作成功*/
public class AjaxResponseMsg {
private int flag;
private String msg;
}

第二步：js代码

$.ajax({
async : false,
cache : false,
type : 'POST',
url : 'app/area/delete',
error : function() {
alert('smx失败 ');
},
success : function(data) {
var jsonData = JSON.parse(data);
if (jsonData .flag == 0) {//请求成功
alert("后台操作成果");
} else {
alert(jsonData .msg);
}
}
});

第三步：java代码

/**（1）添加注解@ResponseBody
(2)可以接收参数
(3)返回类型就是实体类*/
@ResponseBody
@RequestMapping(value = "area/delete", method = RequestMethod.POST)
public AjaxResponseMsg editAreaWithFile() {

// 做操作
boolean result = true
AjaxResponseMsg ajaxMsg = new AjaxResponseMsg();
if (result == true)
ajaxMsg.setFlag(0);
else {
ajaxMsg.setFlag(1);
ajaxMsg.setMsg("不能给一个传感器添加重复设备");
}
return ajaxMsg; // 返回给前台一个实体类，包括是否操作成功，及失败原因
}

4.后台返回一个实体类list（实体类的字段都是基本类型）
实体类

public class Section{
private Long id; //id
private String name; //名称
}

前台

$.ajax({
async : false,
cache : false,
type : 'POST',

url : "section/getSections",
error : function() {
alert("失败");
},
success : function(data) {
var jsonData = JSON.parse(data); //jsonData是该下路下的所有区间（json格式）

for (var i = 0; i < jsonData.length; i++) {
alert(jsonData[i].id);
alert(jsonData[i].name);
}

}
})

后台

@ResponseBody
@RequestMapping("/section/getSections")
@RequiresPermissions("section:view")
public List<Section> getSections() {
List<Section> sections = new List<Section>();
return sections;
}

5.后台返回一个实体类list（实体类的字段包括List类型）
第一步：定义实体类ChartSeries

public class ChartSeries {
private String name; //曲线名称
private List<Float> data; //曲线的纵坐标
private List<Date> occurTime; //曲线的横坐标
//添加get set方法
}

第二步：js代码

$.ajax({
url : "/dataRecord/chart" , //获取数据列
type : 'GET',
data : {
},
success : function(data) {
formatStringToJson(data);//对数据进行处理
}
});

function formatStringToJson(data) {

jsonData = JSON.parse(data); //把后台传来的数据转来JSON格式
//jsonData是二维数组，因为实体类ChartSeries的字段data也是个list
for (x in jsonData) { //遍历JSON格式的数组取元素, x代表下标

for (y in jsonData[x].data) {
alert(jsonData[x].occurTime[y]) ;//依次获取
alert(jsonData[x].data[y]);
}

}

}

第三步：java代码

@ResponseBody
@RequiresPermissions("dataRecord:view")
@RequestMapping(value = "/dataRecord/chart}", method = RequestMethod.GET)
public List<ChartSeries> getChart(){
List<ChartSeries> list = new List<ChartSeries>();
//给list赋值
return list; // list
}

定义和用法
ajax() 方法用于执行 AJAX（异步 HTTP）请求

语法
注意：
- 下面关于ajax 的 async:false/true的作用整理下
　　async.默认是 true，即为异步方式，.ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发.ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发.ajax里的success方法，这时候执行的是两个线程。

　　async 设置为 false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

async   布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr)   发送请求前运行的函数。
cache   布尔值，表示浏览器是否缓存被请求页面。默认是 true。设置为false将不会从浏览器缓存中加载请求信息。
complete(xhr,status)   请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
contentType   发送数据到服务器时所使用的内容类型。默认是：”application/x-www-form-urlencoded”。
context   为所有 AJAX 相关的回调函数规定 “this” 值。
data   要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:”bar1”,foo2:”bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,”bar2”]}转换为&foo=bar1&foo=bar2。
dataFilter(data,type)   用于处理 XMLHttpRequest 原始响应数据的函数。
dataType   预期的服务器响应的数据类型。要求为String类型的参数。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。json：返回JSON数据。jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个 “?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。
error(xhr,status,error)   如果请求失败要运行的函数。
global   布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified   布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp   在一个 jsonp 中重写回调函数的字符串。
jsonpCallback   在一个 jsonp 中规定回调函数的名称。
password   规定在 HTTP 访问认证请求中使用的密码。
processData   布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset   规定请求的字符集。
success(result,status,xhr)   当请求成功时运行的函数。
timeout   要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
traditional   布尔值，规定是否使用参数序列化的传统样式。
type   要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
url   要求为String类型的参数，规定发送请求的 URL。默认是当前页面。
username   规定在 HTTP 访问认证请求中使用的用户名。
password   规定在 HTTP 访问认证请求中使用的密码。
xhr   用于创建 XMLHttpRequest 对象的函数。
$.each()函数:

$.each()函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容

案例代码：

$(function(){
$('#form').click(function(){
$.ajax({
type: "POST",
url: "zm.action",
data: {username:$("#username").val(),
content:$("#content").val()
},
dataType: "json",
success: function(data){
$('#resText').empty(); //清空resText里面的所有内容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']