java js交互 js交互代码

使用条件：前端数据返回给后端，但前端仍然要显示后端经过处理返回的数据，这个时候就需要js来实现，这里只是简单使用

1、举例，提交用户名和密码之后，返回个人信息，在当前页textarea显示.(一开始不会显示，然后提交之后，经过servlet处理然后就会显示)

<form action="servlet" method="post"  onsubmit="return false">
    用户名：<input type="text" name="username" id="name">
    密码：<input type="text" name="lpassword" id="password">
       <button id="login">提交</button>
</from>
<div>
<textarea id="show">
</div>

如果不用js语法，它是点击按钮由表单自动提交，但是使用js语法，它是由js提交，你只需要在表单属性里加上οnsubmit="return false"即可

2、js语法，使用jquery

//使用js语法必须要写上这一句
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
 jQuery(document).ready(function () {
       $("#login").on("click",function () {
           $.ajax({
               type:"post",//提交方式
               url:"/login",//提交的URL地址，即servlet处理地址
               data:{"username":$("#name").val(),"lpassword":$("#password").val(),},//这里写传送给servlet的参数，引号里面的是名字，冒号后面的是根据id值获取到的值，不同组件使用的不一样，在下面介绍
               success:function (data) {//可以看成分割线，上面为传送过去，这里是成功传送回来，封装在data里
                alert(data.mess);
                   if(data.mess==="登陆成功") $("show").val(data.textmassage);
               }
           }
        );
       })
    });
</script>

对于提交数据的组件都可以使用$("#组件id").on("click",function () {}）；方法，

如果用到返回数据可以使用

 $.ajax({
               type:"post",//提交方式
               url:"/login",//提交的URL地址，即servlet处理地址
               data://传送给后端的数据，没有可以不写，用花括号括起来，每个属性逗号隔开，每个属性前面写名字（这个名字自定义，但是后端要通过这个名字来获取）再写冒号，后面写id属性值
               success:function (data) {

              //可以看成分割线，上面为传送过去，这里是成功传送回来，封装在data里
                这里可以使用data传过来的各种属性获取，比如后端写了res.put("inputCount", count);你就可以使用

               $("#组件id").val(data.inputCount).获取或者直接获取 var x; x=data.inputCount;

               }
        );

注意：给组件获取值或者设定值根据组件类型不一样，方法也不一样

例如：input 获取值$("#id").val()    获取值时括号里为空，赋值时括号里为值

$("#showStack").html(""); xxxxx.inner() xxxx.text()

//具体获取或者赋值使用什么要看组件类型，自行百度

3.后端如何处理

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");
        String name=request.getParameter("usrname");
        String password=request.getParameter("lpassword");//引号里的值是ajax传过来的data里属性中冒号前面的名字
        //存返回信息
        Map<String, Object> res = new HashMap<>();
        String message=null;
        .....
        登录处理
        if（成功）{给massage赋值}
        else 给massage赋相应的值
        ....

        res.put("textmassage",message);
        //返回Json字符串，就当做ajax中的data使用，这个要用的话需要引一下jar包，我会把它附在下面
        response.getWriter().write(new Gson().toJson(res));
    
}

有需要用到json的jar包的可以用json jar包 提取码：eqe3

以上介绍的都是浅层使用js,利于初学者使用，不喜勿喷