ajax示例

已于 2024-01-15 14:56:41 修改
阅读量646 收藏 1
点赞数
分类专栏： # ajax 文章标签： ajax okhttp 前端
于 2020-03-03 10:42:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a3562323/article/details/104625991
版权

目录

1、ajax以form形式发送数据

1.1 ajax代码

这里的contentType值是application/x-www-form-urlencoded，是默认的，不写也可以

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("button").click(function() {

			// 真正作为请求体发送给服务器的数据。
			// 在我们像提交表单一样发送数据时，不把JSON对象转换为JSON字符串
			var requestBody = {
				"empId" : 999,
				"empName" : "harry",
				"empSalary" : 128.56
			};

			$.ajax({
				"url" : "ajax/send/form/data", // 请求的目标地址
				"type" : "post", // 请求方式
				"data" : requestBody, // 请求体数据
				"contentType" : "application/x-www-form-urlencoded", //默认值，可以省略该项
				"dataType" : "json", // 服务器端返回数据的解析方式
				"success" : function(response) { // 服务器处理请求成功，执行这个函数，响应体从参数这里传入

					// response已经解析为JSON对象，可以直接使用“.属性名”方式访问具体属性
					var result = response.result;

					// 如果返回结果成功，显示成功（逻辑成功）
					if ("SUCCESS" == result) {
						alert("SUCCESS");
					}

					// 如果返回结果失败，显示消息（逻辑失败）
					if ("FAILED" == result) {

						var message = response.message;

						alert(message);
					}

				},

				"error" : function(response) { // 处理请求失败，例如：404、500、400等等

					alert(response);

				}
			});
		});
	});
</script>
</head>
<body>

	<button>点我发送数据（像提交表单一样）</button>

</body>
</html>

1.2 后端代码

	//因为前端传送的数据都是Employee这个对象对的属性，所以直接用对象接收
	//如果传送的是单个数据，使用@RequestParam("empName")String empName取值，直接用就可以了
	@ResponseBody
	@RequestMapping("/ajax/send/form/data")
	public ResultEntity<String> receiveFormData(Employee employee) {
		
		System.out.println(employee);
		
		//ResultEntity就是一个实体类，存了返回的的状态和消息提示
		return ResultEntity.successWithoutData();
	}

在这里插入图片描述

2、ajax以JSON形式发送数据

2.1 ajax代码

contentType的值和form形式不一致，这里是json格式的
"contentType":"application/json;charset=UTF-8"

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
	
	$(function(){
		$("button").click(function(){
			
			// Ajax请求的请求体如果是JSON格式，那么需要先将数据封装为JSON对象
			var jsonObj = [
				{
					"empId":666,
					"empName":"jerry",
					"empSalary":123.321
				},
				{
					"empId":555,
					"empName":"bob",
					"empSalary":456.654
				},
				{
					"empId":444,
					"empName":"kate",
					"empSalary":666.666
				}
			];
			
			// 将JSON对象转换为JSON字符串
			var requestBody = JSON.stringify(jsonObj);
			
			// 发送Ajax请求
			$.ajax({
				"url":"ajax/send/json/data",	// 请求的目标地址
				"type":"post",					// 请求方式
				"data":requestBody,				// 请求体数据
				"contentType":"application/json;charset=UTF-8",	//非默认值，不能省略
				"dataType":"json",				// 服务器端返回数据的解析方式
				"success":function(response) {			// 服务器处理请求成功，执行这个函数，响应体从参数这里传入
					
					// response已经解析为JSON对象，可以直接使用“.属性名”方式访问具体属性
					var result = response.result;
				
					// 如果返回结果成功，显示成功（逻辑成功）
					if("SUCCESS" == result) {
						alert("SUCCESS");
					}
					
					// 如果返回结果失败，显示消息（逻辑失败）
					if("FAILED" == result) {
						
						var message = response.message;
						
						alert(message);
					}
					
				}, 
				
				"error":function(response){			// 处理请求失败，例如：404、500、400等等
					
					alert(response);
					
				}
			});
			
		});
	});
	
</script>
</head>
<body>

	<button>以JSON格式提交数据</button>

</body>
</html>

2.2 后端代码

  这里和以form形式的接收数据不一样，form形式的直接接收就可以，但是以json发送的，这里要用@RequestBody接收，不然接收的值是null，
  因为ajax传入的是集合，所以这里用的List接收的，传入的如果不是List，直接用对象或属性名接收就可以

	@ResponseBody
	@RequestMapping("/ajax/send/json/data")
	public ResultEntity<String> receiveJsonData(@RequestBody List<Employee> empList) {
		
		for (Employee employee : empList) {
			System.out.println(employee);
		}
		
		return ResultEntity.successWithoutData();
	}

3、ajax以form形式发送list数据

3.1 ajax代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
	
	$(function(){
		$("button").click(function(){
			
			// Ajax请求的请求体如果是JSON格式，那么需要先将数据封装为JSON对象
			var jsonObj = {
				"empList[0].empId":666,
				"empList[0].empName":"jerry",
				"empList[0].empSalary":123.321,
				"empList[1].empId":555,
				"empList[1].empName":"bob",
				"empList[1].empSalary":456.654,
				"empList[2].empId":444,
				"empList[2].empName":"kate",
				"empList[2].empSalary":666.666
			};
			
			// 发送Ajax请求
			$.ajax({
				"url":"ajax/send/form/list/data",	// 请求的目标地址
				"type":"post",					// 请求方式
				"data":jsonObj,				// 请求体数据
				"contentType":"application/x-www-form-urlencoded",	//非默认值，不能省略
				"dataType":"json",				// 服务器端返回数据的解析方式
				"success":function(response) {			// 服务器处理请求成功，执行这个函数，响应体从参数这里传入
					
					// response已经解析为JSON对象，可以直接使用“.属性名”方式访问具体属性
					var result = response.result;
				
					// 如果返回结果成功，显示成功（逻辑成功）
					if("SUCCESS" == result) {
						alert("SUCCESS");
					}
					
					// 如果返回结果失败，显示消息（逻辑失败）
					if("FAILED" == result) {
						
						var message = response.message;
						
						alert(message);
					}
					
				}, 
				
				"error":function(response){			// 处理请求失败，例如：404、500、400等等
					
					alert(response);
					
				}
			});
			
		});
	});
	
</script>
</head>
<body>

	<button>以表单形式提交List数据</button>

</body>
</html>

在这里插入图片描述

3.2 后端代码

package com.wzw.crowd.funding.ajax.entity;

import java.util.List;

public class EmployeeParam {
	
	private List<Employee> empList;
	
	public EmployeeParam() {
		// TODO Auto-generated constructor stub
	}

	public EmployeeParam(List<Employee> empList) {
		super();
		this.empList = empList;
	}

	@Override
	public String toString() {
		return "EmployeeParam [empList=" + empList + "]";
	}

	public List<Employee> getEmpList() {
		return empList;
	}

	public void setEmpList(List<Employee> empList) {
		this.empList = empList;
	}

}

这里是用form形式提交的，所以也不用@RequestBody

	@ResponseBody
	@RequestMapping("/ajax/send/form/list/data")
	public ResultEntity<String> receiveFormListData(EmployeeParam employeeParam) {
		
		List<Employee> empList = employeeParam.getEmpList();
		
		for (Employee employee : empList) {
			System.out.println(employee);
		}
		
		return ResultEntity.successWithoutData();
	}

在这里插入图片描述

4、ajax发送数组

4.1 ajax代码

traditional: true——这个重要的，不加的话，发送的时候会给你的参数再加个[]，就报错了；

	var pathFile=["123","456"];
       $.ajax({
            async : false,
            cache : false,
            traditional: true,
            type : 'POST',
            data : {
                pathFile:pathFile
            },
            url : "acc/downFile",// 请求的路径
            error : function() {// 请求失败处理函数
            },
            success : function(data) {

            }
        });

4.2 后端代码

    @RequestMapping(params = "downFile")
    @ResponseBody
    public String downFile(HttpServletRequest request, String[] pathFile) {
        String[] pathFiles = pathFile;
        System.out.println(pathFile);
        return "123";
    }

5、ajax下载文件

ajax是弹不出文件下载框的，用以下替代方式

        var url = "/down/downFile";
        var fileName = "123.rar";
        var form = $("<form></form>").attr("action", url).attr("method", "post");
        form.append($("<input></input>").attr("type", "hidden").attr("name", "fileName").attr("value", fileName));
        form.appendTo('body').submit().remove();

6、FormData提交数据

<!DOCTYPE html>
<html>
<head>
  <title>文件上传示例</title>
</head>
<body>
  <input type="file" id="fileInput">
  <button onclick="uploadFile()">上传文件</button>
</body>
</html>

var fileInput= $('#fileInput')[0];
var zipFile= fileInput.files[0];	//通过id获取文件
//初始化一个空的表单
var fromData=new FromData();

// 获取页面已有的一个form表单
//var form = document.getElementById("myForm");
// 用表单来初始化
//var formData = new FormData(form);

//添加文件
formData.append("zipFile",zipFile);	
//添加数据
formData.append("username", "username");

在这里插入图片描述
在这里插入图片描述

小结

  一般情况下，使用第一种第二种就可以，第三种有点多余
┐(ﾟ～ﾟ)┌

中文乱码

contentType:application/x-www-form-urlencoded;charset=UTF-8

WuWuII
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ajax使用示例
一行一步的博客
08-16 4673
$.ajax({ async:true, type: ‘get’, url:“demo_test.txt”, contentType:‘application/x-www-form-urlencoded’, data:{ name : ‘name’,password:‘password’}, dataType:‘application/x-www-form-urlencoded’, succes...
Ajax技术 实例篇
weixin_47044904的博客
06-09 1110
本篇文章通过Html+Ajax+node技术实现一个简单的Ajax请求案例，为加强对Ajax技术的了解和实操经验
AJAX案例操作
qq_66429904的博客
12-09 716
ajax
Ajax的用法示例
Venus熊的博客
09-12 336
Ajax的作用是实现页面与后台服务器之间的异步传输，下卖弄我们就来看一下具体怎么实现的。 第一步 创建一个xhl的实例对象 var httpRequest = new XMLHttpReuest(); 第二步 打开一个http连接 httpRequest,open('get','http://203.195.240.58:8888/index/category/findAll'); 注意：如果有需要则设置参数 var obj = { page:1, pageSize:10, } //将js字符串转换
Ajax简单示例
weixin_52472152的博客
11-17 528
一、HTML文件代码如下： <!DOCTYPE html> <html> <head> <title>AjaxTest</title> <script> var xmlHttpRequest; function getAjaxData() { // 以上直接创新XMLHTTPRequest对象，IE6 以下创建ActiveXObject对象
ajax示例代码
09-04
本示例将详细介绍Ajax的基础使用，结合Java后端进行交互。** **一、Ajax的基本原理** Ajax的核心是JavaScript对象XMLHttpRequest，它允许在后台与服务器交换数据并更新部分网页内容。通过创建XMLHttpRequest对象、...
可运行ajax示例说明
01-25
ajax示例说明
Cloudscape与Ajax示例
03-04
第2部分探索应用程序——第2部分结束语　对于Ajax应用程序来说，尤其是当客户机和服务器在同一台主机上时，Derby是很好的数据库，因为Derby不需要任何管理，而且可以嵌入到应用程序中。本文介绍了创建一个嵌入式...
bootstrap table ajax 示例
10-16
在这个“bootstrap table ajax 示例”中，我们看到一个利用 Maven 构建的项目，它展示了如何通过 AJAX 从后台动态地分页获取并显示数据。 首先，我们需要理解Maven。Maven 是一个Java项目管理工具，它帮助开发者...
原生Ajax的使用，四种请求方法示例（前后端代码）
最新发布
kkkys_kkk的博客
01-13 3329
这样可以避免整个页面的刷新，提高用户体验。3. 异步加载数据：原生 Ajax 可以用于异步加载数据，例如从服务器获取 JSON、XML 或纯文本数据，并用于更新页面的内容。2. 原生支持：原生 Ajax 是由浏览器原生支持的技术，无需引入额外的库或框架，可以直接使用浏览器提供的 API。例如，可以使用原生 Ajax 在用户点击按钮或链接时加载新的数据，然后将数据动态地插入到已有的页面中，实现无刷新的内容更新。对于一些高级的功能，例如处理异步请求的回调地狱、安全性等问题，可能需要更加细致的处理和实施。
学习Ajax的一个小例子
03-22
NULL 博文链接：https://wankunde.iteye.com/blog/929965
非常简单的Ajax请求实例附
10-23
为大家推荐了一个非常简单的Ajax请求实例，可以在不重载页面的情况与 Web 服务器交换数据，感兴趣的小伙伴们可以参考一下
ajax例子ajax例子
05-18
ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子
ajax发送请求实例使用
qq_40132294的博客
02-28 1762
目录 局部刷新和无刷新 同源策略 1.熟悉jquery选择器， 去页面上获取发送ajax请求时的参数数据2.发送ajax请求3.将返回数据加载到页面：通过jquery操作页面元素和属性 示例：登录界面发送ajax请求 ajax技术的目的是让javascript发送http请求与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，然后使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。 局部刷新和无刷新 ajax可以实现局部.
ajax 的入门案例
qq_52370789的博客
04-12 689
ajax，Asynchronous JavaScript And XML，异步的JavaScript和XML同步：伴随着页面的刷新或跳转，即全局刷新；同步请求会阻塞代码的执行，即同步请求会一个一个的执行异步：在不刷新页面的情况下与服务器进行交互，即局部刷新；异步请求不会阻塞代码的执行，ajax请求一旦发送，不会等服务器响应结果完毕，后面的代码就会继续执行ajax的核心对象XMLHttpRequest。
ajax详细用法
Grapefruit_____的博客
10-08 489
什么是ajax Ajax的全称是Asynchronous JavaScript And XML（异步 JavaScript 和 xml） 通俗的理解:在网页中利用XMLHttpRequest 对象和服务器进行数据交互的方式，就是 Ajax Ajax能让我们轻松实现网页与服务器之间的数据交互 通俗的理解:说白了，从单机版，变成了网络版 同步和异步的区别: 同步：当前用户发送请求后,浏览器什么都不做,等请求完成响应客户端后,用户才可以使用页面。 异步：当前用户发出请求后，浏览器可...
Ajax请求示例
weixin_30275415的博客
01-05 50
模板 1 {% for row in host_list %} 2 <tr> 3 <td class="c1">{{ row.id }}</td> 4 <td>{{ row.servern...
ajax如何向后端传递List集合
改天的博客
03-19 3634
问题描述 最近在写个人博客项目，博客后台管理涉及到批量删除博客的功能，后端接收的是List数据类型。 那么如果通过ajax,直接向后端传递List数据类型的数据，而不用转换呢？ 解决方法 前端 ajax发送put 和 delete 请求时,需要传递参数，如果参数在url地址栏上，则可以正常使用。 但是该业务需求是需要用data传递，所以需要将请求方式设置为 type：“post”, //执行删除博客的方法， deleteBlogs() { //博客的id数组 let blogIds =...
ajax传递list集合
祈澈菇凉
03-26 646
原文链接：https://blog.csdn.net/qq_37936542/article/details/79277495一：ajax传递List&lt;String&gt;类型的数据js代码：[html] view plain copy //声明list  var _list = [];  //放入string对象  for (var i = 0; i &lt; 3; i++) {     ...
原生js ajax 示例
03-24
以下是一个原生 JavaScript AJAX 示例： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true); xhr.onload = function() { if (xhr.status ==...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值