ajax参数该怎么传递？ajax参数传递

article/2025/10/16 6:30:36

对于前端开发的小伙伴们而言，一定离不开ajax这个小东西的，它可以帮助你传输你想要的参数，还可以实现局部刷新，那你们知道如何才能在ajax中传递参数吗？今天就和大家说说如何在ajax中传递参数。

ajax参数该怎么传递？

下面是一个get请求的例子，用来实现ajax参数传递

var xmlhttp;
var url = "xxx.action";
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, 
Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert(244);
//获得 XML 形式的响应数据。
//浏览器的 XML 解析器已完成了对xml的加载
var res = xmlhttp.responseXML;
/* 对xml文件的解析
发生在浏览器xml解析器对xml加载之后
*/
var id = res.getElementsByTagName("tid")[0].childNodes[0].nodeValue;
alert("id ii is "+id);
//document.getElementById("display").innerHTML=id;
//jsp不做解析处理
document.getElementById("display").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("post",url,true);
/*
//以form表单的形式发送数据，对应xmlhttp.send("str=122");
//后台java代码直接通过request.getParameter("str");的方式获取
xmlhttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); 
*/
/* //以普通文本的形式发送数据，其中包括json的形式，json对应xmlhttp.send("{str:122}");
//后台java代码通过BufferedReader reader = request.getReader();方式获取其二进制编码格式的数据
//不能直接通过request.getParameter("str");的方式获取
//xmlhttp.setRequestHeader('Content-type','text/plain'); */
//提交xml格式的数据
xmlhttp.setRequestHeader("Content-Type", "text/xml");
xmlhttp.send(xmltext);
//xmlhttp.send("str=133");

因为Ajax为get请求，所以Java代码中注解应该为GetMapping，注意前端参数与后端方法参数名需一致。

下面是post方式请求传递参数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS</title>
<style>
#box{
width:600px;
height:200px;
padding:20px;
border:1px solid #999;
}
</style>
</head>
<body>
<h1>ajax post方式传递参数</h1>
<hr>
Number1: <input type="text" id="num1"><br>
Number2: <input type="text" id="num2"><br>
<button onclick="loadHtml()">加载</button>
<div id="box"></div>
<script>
function loadHtml(){
//获取表单中的数据
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
//实例化XMLHttpRequest对象
if(window.XMLHttpRequest){
//非IE
var xhr = new XMLHttpRequest();
}else{
//IE 6
//var xhr = new ActiveXObject('Microsoft.XMLHTTP');
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//给xhr绑定事件.检测请求的过程
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
//如果成功接收到并响应
if(xhr.status == 200 &&　xhr.readyState == 4){
document.getElementById('box').innerHTML = xhr.responseText;
}
}
//进行请求的初始化
xhr.open('post','js.php',true);
//设置请求头
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
//正式发送请求
xhr.send('n1='+num1+'&n2='+num2);
}
</script>
</body>
</html>

这里Ajax为post请求，所以Java代码中注解应该为PostMapping，注意前端参数与后端方法参数名需一致。