jquery ajax提交表单form数据几种方式小结 a标签提交，input标签提交 submit提交

最新推荐文章于 2025-06-26 11:34:08 发布

原创最新推荐文章于 2025-06-26 11:34:08 发布 · 3.1k 阅读

4 ·

CC 4.0 BY-SA版权

jquery-aja 专栏收录该内容

5 篇文章

订阅专栏

本文总结了两种使用jQuery AJAX提交表单数据的方式：通过input[type='button']和a标签的onclick方法。在使用中，需要注意input按钮点击事件的绑定以及a标签触发AJAX请求的问题，尤其是当表单元素被div包围时可能出现的调试问题。

方式一：举个例子。
<a href="javascript:void(0)" id="click">点击</a>

//jq获取标签，并且绑定单击事件
$(“#click”).click(function (){
//点击后要执行的操作
window.location.href=”跳转的地址”;
});

方式二：带参数

<a href='javascript:void(0)' onclick=\"cc('" + parameter1 + "','" + parameter2 + "','" + parameter3 + "','" + parameter4 + "')\">我的链接</a>

以下使用始终无法触发页面ajax请求。目前还找不到原因。页面一直弹窗“JavaScript：void(0)”.why?

 <a href="javascript:void(0)"  onclick="register()" value=" register" class="reg-bt" target="_blank">注 册</a>

<script>
   function register() {  
           if ($("#username").val() == null) {
               alert("请输入账号")
           }
   }
   </script>

ajax提交方式一：form 的input type=”button” 的提交方式

<form id="reg-form"   >
     <p class="pass-form-item">
         <label class="pass-label">账号: </label>
         <input type="text" name="username" id="username"  placeholder="输入账号，登录使用"/>
     </p>
     <p class="pass-form-item">
         <label class="pass-label">密码: </label>
         <input type="password" name="password" id="password" class="pass-text-input"/>
     </p> 
         <input type="button" onclick="register()"  value=" 注册" target="_blank"> </input>
    </form>

<script>
 function register() {  
     alert("开始执行ajax（）")
     var params = {
         username: $("#name").val(), 
         password: $("#password").val(), 
     }
     $.ajax({
             type: "post",
             url: "@{/doRegister}",
             data: JSON.stringify(params),
             dataType: 'json',
             contentType: 'application/json;charset=UTF-8',
             success: function (r) {
                 alert("ajax请求后台成功返回")

             }
     }) 
   }
</script>

ajax提交方式二：form 的a标签 onclick 方法的提交方式，

注意：必须要 form 包含的，之前用 div 一直调试不成功

<form id="reg-form"   >
     <p class="pass-form-item">
         <label class="pass-label">账号: </label>
         <input type="text" name="username" id="username"  placeholder="输入账号，登录使用"/>
     </p>
     <p class="pass-form-item">
         <label class="pass-label">密码: </label>
         <input type="password" name="password" id="password" class="pass-text-input"/>
     </p> 
    <p class="reg-bt">
         <a href="javascript:void(0)" onclick="register()"  value=" register">注 册</a>
    </p>
    </form>

<script>
 function register() {  
     alert("开始执行ajax（）")
     var params = {
         username: $("#name").val(), 
         password: $("#password").val(), 
     }
     $.ajax({
             type: "post",
             url: "@{/doRegister}",
             data: JSON.stringify(params),
             dataType: 'json',
             contentType: 'application/json;charset=UTF-8',
             success: function (r) {
                 alert("ajax请求后台成功返回")

             }
     }) 
   }
</script>