前后端交互-前端给后端如何发送数据【1】

沉燃
963 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

传纸条 上自习课时，都可能会有过传纸条聊天的经历，同学A和同学B聊天，聊天的内容就写在纸条上，在传递纸条时，都会和帮忙传递纸条的同学说：这个纸条是同学A传给同学B的，当同学B拿到纸条后，同学B就会准确的知道同学A要和同学B说的什么，然后同学B在纸条上回信息 ，再拜托别的同学把纸条传回去，那么同学A就准确接收到了同学B的纸条回复。


前后端交互是一个给人感觉很玄乎的东西，前端和后端交互是如何完成的呢？前后端交互既没有传纸条那样以纸条作为传递信息的载体，也没有同学帮忙，作为传递信息的路径，那是如何完成交互的呢？难道靠的是前端和后端的意念？？？

前端如何给后台发送/传递数据。 1、a标签hre发送请求，可以在跳转目标后拼接字符串，拼接的字符串为所要提交的数据，提交的默认方式是GET提交。

<a href="XXXServlet?id='1'&name='张三'"></a>

2、表单提交发送请求,表单提交可更改提交方式，默认为GET提交，可改为POST提交，action为提交的地址，要注意的是表单提交的提交验证在表单中.

<form method="post" action="xxxServlet">
     姓名：<input type="text" name="userName"/>
     年龄：<input type="text" name="age"/>
      <input type="submit" value="提交"/>
   </form>

后端接收请求:getParameter(String)的参数对应前端传过来的属性值

protected  void doPost(HttpServletRequest request,HttpServletResponse response)
         throws  ServletException,IOException{
   String userName=request.getParameter("userName");
   String age=request.getParameter("age");
}

3、AJAX提交
Ajax主要通过XMLHttpRequest对象处理发送异步请求和回应。js的Ajax提交非常复杂，JQuery中的Ajax提交相对简洁。
js中的Ajax提交

        var xmlHttp;
        function createXMLHttp(){    //创建核心对象
            if(window.XMLHttpRequest){     //判断当前使用的浏览器
                xmlHttp=new XMLHttpRequest();
            }else{
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        function showMsg(){
            createXMLHttp();     //建立核心对象
            xmlHttp.open("POST","content.htm");   //设置一个请求
            xmlHttp.onreadystatechange=showMsgCallback;   //设置请求完成后处理回调函数
            xmlHttp.send(null);    //发送请求，不传递任何参数
        }
        function showMsgCallback(){     //回调函数
            if(xmlHttp.readyState==4){    //数据返回完毕
                if(xmlHttp.status==200){    //操作正常
                    var text =xmlHttp.responseText;     //接收返回内容

                }
            }
        }
     </script>

JQuery中的Ajax提交

      $.ajax({
             //提交地址拼接所要传递的数据
            url:'xxxServlet?userName='+userName+'age='+age,    
            type:'GET',               //提交方式
            contentType:false,
            processData:false,
            cache:false,
            success:function(data){      //接收返回的数据
                if(data){

                }else{
                    alert("失败");
                }
            }
        });

小结 分析可得，前端相当于同学A，后端相当于同学B，纸条就是要传递的数据，帮忙传递纸条的传给同学B相当于是请求地址，前端通过a标签的href的地址，form表单的action提交地址，Ajax的url请求地址能准确的找到请求目标；在地址后拼接字符串传递，使用getParameter传递。在发起请求时把参数传递过去，后端就能准确接收到。 GET提交：使用GET提交时，所有输入内容会自动在地址栏之后显示，显示的方式与地址重写格式一样，信息长度有限制，不能提交过多内容。 POST提交：提交后地址栏只显示目标地址，不显示任何输入内容，可以提交更多内容，没有信限制。

感谢阅读，要是有错，还请指正！！！

avatar
文章
阅读
粉丝