Ajax调用Http接口参数拼接方法$.param()用法

小咪咪 2023-10-05 11:27 28阅读 0赞

<%@ 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() {
    	var urlparam = {
    		method:"login",
    		username:$("#username").val(),
    		password:$("#password").val(),
    		age:"30",
    		job:"Programer"
    	}
    	alert(urlparam);
    	alert("login.do?"+$.param(urlparam));
    	$.ajax({
    		type: 'post',
    	    url: "login.do",
            data: $.param(urlparam),
      	    success: function (data) {
    		       alert(data);
    	     },
    	    error:function(data){
    		      alert(data);
    	    }
    	 });
    };
    </script>
    </head>
    <body>
        <form id="loginform" action="#" method="post">
    		用户名<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>

用这种方法拼接URL参数对比用 data: $('\#loginform').serialize()  方法的优点是灵活。用户可以任意取舍，需要的参数也不一定是要存在的表单元素。可以随意定义，缺点是麻烦。用哪种方法好。见仁见智！

效果如下：

![20201010184720340.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2_size_16_color_FFFFFF_t_70][]

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

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