java工程师前后台交互 java前后端交互方式

转载

索姆拉 2022-04-06 00:01:31

文章标签 交互 xml ajax html 文章分类 Java 后端开发

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包

java工程师前后台交互 java前后端交互方式_xml

还是拿案例中的方法举例

ajax 参数介绍：

java工程师前后台交互 java前后端交互方式_交互_02

<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格式

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