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

壤驷乐邦
2023-12-01

方式一:举个例子。
<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>
 类似资料: