原生js的Ajax提交json数据到后台

原生ajax发送json数据到后台接收(将json转换为name=tom&pwd=123格式的字符串,简单,不在本次测试内),需要做到几点:

1,post方式发送。

2、json对象必须转换为json格式字符串

3、(setQequestHeader,可以默认或者application/json;)

4、后台接收,必须用request.getInputStream()方式。


SO:此种方式适合,前端发送json数据,后台接收后通过json解析,获取每条数据

不过,jQuery可以轻松解决此问题,直接发送json数据。(jQuery底层应该是先解析json成name=tom&pwd=123格式再提交后台的,我的猜测)

------------------------------------------------------------------------------------------

<script type="text/javascript" >

function getXMLHttpRequest(){
var xmlhttp;
if (window.XMLHttpRequest)
{
//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
window.οnlοad=function()
{
var xmlhttp=getXMLHttpRequest();
var data={
"username":"汤姆",
"password":"123"
}
var stringData=JSON.stringify(data);


xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","${pageContext.request.contextPath}/AjaxDemo1",true);
//xmlhttp.setRequestHeader("text/plain;charset=UTF-8");//默认方式(可以发送json格式字符串)
//xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.setRequestHeader("Content-type","application/json;charset=UTF-8");//可以发送json格式字符串

//xmlhttp.send(data);//后台无法接收
//发送json数据,首先POST方式,再需要先格式化为json格式的字符串发送过去,后台才能接收到,
//并且需要后台通过request.getInputStream获取数据,无法通过getInparamter方法获取
xmlhttp.send(data);
}

</script>


后台代码:

@WebServlet("/AjaxDemo1")
public class AjaxDemo1 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");//null
String password = request.getParameter("password");//null
String contentType = request.getContentType();
//前端提交的数据是json格式的字符串数据时,需要以下方式接收数据
ServletInputStream is = request.getInputStream();
BufferedReader br = new BufferedReader(new InputStreamReader(is));
String line=null;
while((line=br.readLine())!=null){
System.out.println(line); //{"username":"汤姆","password":"123"}
}

System.out.println(contentType);
response.getWriter().print("username="+username+","+"password="+password);//null,null
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}


}

  • 2
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在JavaScript中,可以使用以下几种方法来获取后台list对象的JSON数据: 1. 使用AJAX技术发送HTTP请求并接收后台返回的JSON数据。你可以使用原生的XMLHttpRequest对象,也可以使用第三方库,如jQuery、axios等。发送AJAX请求的代码可以如下所示: ```js var xhr = new XMLHttpRequest(); xhr.open('GET', 'backend-url', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var jsonData = JSON.parse(xhr.responseText); // 处理JSON数据 } }; xhr.send(); ``` 2. 在HTML页面中通过script标签引入JSON文件。可以在后台将list对象转为JSON字符串,并保存为一个JSON文件,然后在前端页面通过script标签引入该文件,并在JavaScript中访问其中的数据。代码示例: ```html <script src="list.json" type="text/json" id="list-data"></script> <script> var jsonData = document.getElementById('list-data').innerHTML; var list = JSON.parse(jsonData); // 处理JSON数据 </script> ``` 3. 后台通过服务端模板引擎将list对象嵌入到JavaScript代码中的一个变量中,并将该JavaScript代码嵌入到HTML页面中。前端页面可以直接访问该变量来获取list对象的JSON数据。代码示例: ```html <script> var jsonData = <%= JSON.stringify(list) %>; // 处理JSON数据 </script> ``` 无论使用哪种方法,获取到JSON数据后,你可以通过遍历、索引等方式来访问其中的数据元素,进行后续的处理和操作。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值