javaweb前后端交互的方法总结

1.超链接 

 get方法

前端发送数据

<a href="testrequest?upass=abc&uage=12">test-get</a>

后端接收

req.getParameter("uage");
req.getParameter("upass");

2.from表单 

默认是get方法   一般都是用post提交

前端发送数据

<form  action="testrequest" method="post">
			uname:<input type="text"name="uname" value="liwei" />
			<input type="submit" value="提交"/>
		</form>

后端接收

post请求会遇见中文乱码的问题 get 请求从Tomcat8之后不再出现中文乱码，版本之前的需要手动处理乱码

req.setCharacterEncoding("utf-8");
		req.getParameter("uname");

第一种和第二种方法都需要在web.xml中配置路径访问

<servlet>
			<servlet-name>a1</servlet-name>
            <!--这里为请求处理类的完全名称  包名+类名-->
			<servlet-class>web.TestServlet</servlet-class>
		</servlet>
		<servlet-mapping>
			<servlet-name>a1</servlet-name>
			<url-pattern>/testrequest</url-pattern>
		</servlet-mapping>

3JavaScript中的ajax

案例

这里主要注意的是post和get方法   当请求为post时候open里面不传参数，传递的参数放在send里

<script>
function test() {
      //发送异步请求
      //1.创建XMLHttpRequest对象
      var xmlhttp;
      if(window.XMLHttpRequest){
        //IE浏览器
        xmlhttp=new XMLHttpRequest();
 
      }else if(window.ActiveXObject){
        xmlhttp=new ActiveXObject("Microssft.XMLHTTP");
      }
      //2.打开链接
     var uname=document.getElementById("uname").value;
      xmlhttp.open("get","/testuname",true);
      //3.指定回调函数
      xmlhttp.onreadystatechange=function () {
      //3.1判断状态,==4---成功返回了
        if(xmlhttp.readyState==4 || xmlhttp.status==200){
          //3.2接收返回的数据
        var responseText = xmlhttp.responseText;
        document.getElementById("rs").innerText=responseText;
 
        }
      }
     xmlhttp.setRequsetHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
      //4.发送数据
      xmlhttp.send("username="+uname);
    }

</script>

4.jquery下的ajax   post  和  get  

引入 依赖  web   WEB-INFO  下建一个lib包

还是拿案例中的方法举例   

ajax  参数介绍：

 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("#uname").blur(function(){
        //1.获得value值
        var uname = $(this).val();
        //2.发送请求
       /* $.ajax({
          url:"/testuname",
          data:"username="+uname,
          type:"post",
          dataType:"text",
          success:function(rs){
            $("#rs").html(rs);
          }
           });
          */
      /* $.get("/testuname","username="+uname,function(rs){
           $("#rs").html(rs);
        });*/

        $.post("/testuname","username="+uname,function(rs){
          $("#rs").html(rs);
        });

      });

    })

  </script>

如果传递的参数为多个用      {"a"=a,"b=b,"c"=c}    这种key=value形式   后端直接根据key获取value

有时候后端返回回来的json格式数据  前端无法取值，但是页面 F12  response  返回值是json格式  

这时候需要对数据进行转译成能获取的格式

eval("("+rs+")");                 //转换成可以处理的json

5.jquery下的toJson

两种返回数据方法的区别

 response.getWriter().print()和    response.getWriter().writer（）  的区别

总结如下：

• response.getWriter()返回的是PrintWriter，这是一个打印输出流。
• response.getWriter().print(),不仅可以打印输出文本格式的（包括html标签），还可以将一个对象以默认的编码方式转换为二进制字节输出
• response.getWriter().writer（）,只能打印输出文本格式的（包括html标签），不可以打印对象。

参考的文章：   比较两者区别