Ajax实现调用接口参数传递方法（页面不跳转）

水深无声 2023-10-05 11:27 20阅读 0赞

**前台普通form Action方式提交**

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <form id="loginform" action="login.do" method="post">
    		用户名<input type="text" name="username" id="username" required autofocus />
    		密 码 <input type="password" name="password" id="password" placeholder="password" required /> 
    			  <input type="submit" value="登录">
    	</form>
    </body>
    </html>

**前台Ajax提交方法**

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    
    
    <script  type="text/javascript">
     function login() {
         $.ajax({
         //几个参数需要注意一下
             type: "POST",//方法类型
             dataType: "text",//预期服务器返回的数据类型
             url: "login.do" ,//url
             data: $('#loginform').serialize(), //自动序列化表单数据为类似method=login&user=wh445306&pass=aA123456
             beforeSend: function () {           //ajax提交前表单校验
            	  if ($("#username").val() == "") {
            		   alert("用户名不能为空");
            		   $("#username").focus();
            		   return false;
            		  }
            		  if ($("#password").val() == "") {
            		   alert("密码不能为空");
            		   $("#password").focus();
            		   return false;
            		  }
            		 },
             success: function (data) {
            	 alert(data);
             },
             complete: function(data){   //ajax 完成
                // $("#loading_id").hide();
            	 $("div").text(data.responseText);
                },
             error : function(XMLHttpRequest, textStatus, errorThrown) {
                	 alert(textStatus);
                 }
         });
     }
    </script>
    </head>
    <body>
        <form id="loginform" action="#" method="post">
            
            <input type="hidden" name="method" value="login"/>  
    		用户名<input type="text" name="username" id="username" required autofocus />
    		密 码  <input type="password" name="password" id="password" placeholder="password" required /> 
            <input type="button" value="登录" onclick="login()">
            <div></div>
    	</form>
    </body>
    </html>

**注意事项：**

1.  在普通form提交方式中，点击的登录按钮的type为"submit"类型会自动提交，提交动作交由form action处理；
2.  在普通form提交方式中，form的action不为空；ajax提交时必须为空，ajax提交时登录按钮要修改，指定onclick事件
3.  ajax方式中需要注意的是$.ajax方法中的参数：dataType和data。要与后端代码保持一致
4.  ajax方式提交时参数可以由：ajax的data属性指定，并由serialize()方法自动序列化指定表单对象, //自动序列化表单数据为类似method=login&user=wh445306&pass=aA123456
5.  当然ajax方法提交请求时也可以用$.param() 方法创建数组或对象的序列化表示形式来拼接HTTP请求参数。如：url: "http://www.\*\*\*\*\*?"+$.param(urldemo)。

**效果如下图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2_size_16_color_FFFFFF_t_70][]

作者原创文章，转载请注明出处！谢谢

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201010181749494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2,size_16,color_FFFFFF,t_70