花魁直播高品质美女在线视频互动社区 - 花魁直播官方版

 歡迎來(lái)到素材無(wú)憂網(wǎng),按 + 收藏我們
登錄 注冊(cè) 退出 找回密碼

織夢(mèng)不跳轉(zhuǎn)用ajax提交自定義表單的方法

時(shí)間： 2018-11-30 10:13 閱讀： 次 作者：素材無(wú)憂網(wǎng)

在做項(xiàng)目的過(guò)程中遇到要將form表單提交轉(zhuǎn)為ajax方式提交，下面是我總結(jié)的如何把form表單提交無(wú)縫轉(zhuǎn)為ajax方式提交的方法。
織夢(mèng)默認(rèn)的表單長(zhǎng)這樣：

<form action="/plus/diy.php" enctype="multipart/form-data" method="post">   
<input type="hidden" name="action" value="post" />   
<input type="hidden" name="diyid" value="1" />   
<input type="hidden" name="do" value="2" />   
<table style="width:97%;" cellpadding="0" cellspacing="1">   
<tr>   
<td align="right" valign="top">電話：</td>   
<td><input type='text' name='dh' id='dh' style='width:250px'  class='intxt' value='' />   
</td>   
</tr>   
<tr>   
<td align="right" valign="top">郵箱：</td>   
<td><input type='text' name='xy' id='xy' style='width:250px'  class='intxt' value='' />   
</td>   
</tr>   
<tr>   
<td align="right" valign="top">內(nèi)容：</td>   
<td><textarea name='nr' id='nr' style='width:90%;height:80'></textarea>   
</td>   
</tr>   
<input type="hidden" name="dede_fields" value="dh,text;xy,text;nr,multitext" />   
<input type="hidden" name="dede_fieldshash" value="ad50c1ee216430a63d64780d3e5e7262" /></table>   
<div align='center' style='height:30px;padding-top:10px;'>   
<input type="submit" name="submit" value="提 交" class='coolbg' />   
&nbsp;   
<input type="reset" name="reset" value="重 置" class='coolbg' />   
</div>   
</form>

要轉(zhuǎn)化為ajax方式提交，需要做以下幾個(gè)改變：

將form元素的屬性action、enctype、method去掉，添加id="form"，form元素就變?yōu)?lt;form id="form">
引入jquery庫(kù)，jquery-1.8.2.min,這個(gè)可以自行百度下載，或者引用公共庫(kù)文件
提交按鈕增加 onclick="add_ajaxmessage()" 并把 type="submit" 修改為 type="button" ，例如：
<input type="button" value="提 交" onclick="add_ajaxmessage()" />
刪除原表單中的這些表格
<input type="hidden" name="action" value="post" />
<input type="hidden" name="diyid" value="1" />
<input type="hidden" name="do" value="2" />
<input type="hidden" name="dede_fields" value="dh,text;xy,text;nr,multitext" />
<input type="hidden" name="dede_fieldshash" value="ad50c1ee216430a63d64780d3e5e7262" />
把a(bǔ)jax代碼放在頁(yè)面最底部（不能放在jquery庫(kù)之前）
<script type="text/javascript">
function add_ajaxmessage(){
    var dataString =
      'dh='+dh.value+ //表單的name和id值必須一致，注意：這一行最前面不能帶有'&'符號(hào)
      '&yx='+yx.value+ //表單的name和id值必須一致，多個(gè)input請(qǐng)自行復(fù)制此行代碼
      '&nr='+nr.value+ //表單的name和id值必須一致，多個(gè)input請(qǐng)自行復(fù)制此行代碼
      '&action=post'+
      '&diyid=1&do=2&dede_fields=dh,text;yx,text;nr,multitext&dede_fieldshash=ad50c1ee216430a63d64780d3e5e7262';
    $.ajax({
        type: "POST",
        url: "/plus/diy.php",//提交到后臺(tái)文件
        data: dataString,//傳值
        success: function(data) {
            //$("#666").html(data);//以html的形式顯示在指定id的元素里，看下面注釋01
            alert(data);//顯示PHP返回的值，如不需要顯示，注釋掉這行即可
            $('#form')[0].reset();//提交后清除id="form"的值
        }
    });
    return false;
}
</script>

注釋01：#666是指定的元素的id，例如<div id='666'></div>，這樣后臺(tái)返回的值就會(huì)以html的樣式顯示在id=666的div里面，（需要在php代碼中把showmsg更換為echo輸出，舉例：echo "<span style='color:#ff0000'>自定義表單不存在</span>";，這樣就會(huì)在id=666的元素中輸出紅色的“自定義表單不存在”看圖1。）
織夢(mèng)不跳轉(zhuǎn)用ajax提交自定義表單的方法(圖1)
  詳解：代碼中有些地方需要和你的自定義表單數(shù)值進(jìn)行替換，下面我用顏色來(lái)標(biāo)注進(jìn)行區(qū)分，請(qǐng)自行替換。

ajax代碼：
<script type="text/javascript">
function add_ajaxmessage(){
   var dataString =
     'dh='+dh.value+ //表單的name和id值必須一致，注意：這一行最前面不能帶有'&'符號(hào)
     '&yx='+yx.value+ //表單的name和id值必須一致，多個(gè)input請(qǐng)自行復(fù)制此行代碼
     '&nr='+nr.value+ //表單的name和id值必須一致，多個(gè)input請(qǐng)自行復(fù)制此行代碼
     '&action=post'+
     '&diyid=1&do=2&dede_fields=dh,text;yx,text;nr,multitext&dede_fieldshash=ad50c1ee216430a63d64780d3e5e7262';
   $.ajax({
       type: "POST",
       url: "/plus/diy.php",//提交到后臺(tái)文件
       data: dataString,//傳值
       success: function(data) {
           //$("#666").html(data);//以html的形式顯示在指定id的元素里
           alert(data);//顯示PHP返回的值，如不需要顯示，注釋掉這行即可
           $('#form')[0].reset();//提交后清除id="form"的值
       }
   });
   return false;
}
</script>


表單代碼（和上面的ajax代碼對(duì)照并替換一致）：
<form action="/plus/diy.php" enctype="multipart/form-data" method="post">   
<input type="hidden" name="action" value="post" />   
<input type="hidden" name="diyid" value="1" />   
<input type="hidden" name="do" value="2" />   
<table style="width:97%;" cellpadding="0" cellspacing="1">   
<tr>   
<td align="right" valign="top">電話：</td>   
<td><input type='text' name='dh' id='dh' style='width:250px'  class='intxt' value='' />   
</td>   
</tr>   
<tr>   
<td align="right" valign="top">郵箱：</td>   
<td><input type='text' name='xy' id='xy' style='width:250px'  class='intxt' value='' />   
</td>   
</tr>   
<tr>   
<td align="right" valign="top">內(nèi)容：</td>   
<td><textarea name='nr' id='nr' style='width:90%;height:80'></textarea>   
</td>   
</tr>   
<input type="hidden" name="dede_fields" value="dh,text;xy,text;nr,multitext" />   
<input type="hidden" name="dede_fieldshash" value="ad50c1ee216430a63d64780d3e5e7262" /></table>   
<div align='center' style='height:30px;padding-top:10px;'>   
<input type="submit" name="submit" value="提 交" class='coolbg' />   
&nbsp;   
<input type="reset" name="reset" value="重 置" class='coolbg' />   
</div>
</form>

版權(quán)聲明： 本站資源均來(lái)自互聯(lián)網(wǎng)或會(huì)員發(fā)布，如果侵犯了您的權(quán)益請(qǐng)與我們聯(lián)系，我們將在24小時(shí)內(nèi)刪除！謝謝！

轉(zhuǎn)載請(qǐng)注明： 織夢(mèng)不跳轉(zhuǎn)用ajax提交自定義表單的方法

標(biāo)簽：  
相關(guān)文章
模板推薦