国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > CMS > 織夢DEDE > 正文

織夢不跳轉用ajax提交自定義表單的方法

2024-07-12 09:03:05
字體:
來源:轉載
供稿:網友
在做項目的過程中遇到要將form表單提交轉為ajax方式提交,下面是我總結的如何把form表單提交無縫轉為ajax方式提交的方法。
織夢默認的表單長這樣:

<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">內容:</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>

要轉化為ajax方式提交,需要做以下幾個改變:

將form元素的屬性action、enctype、method去掉,添加id="form",form元素就變為<form id="form">
引入jquery庫,jquery-1.8.2.min,這個可以自行百度下載,或者引用公共庫文件
提交按鈕增加 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" />把ajax代碼放在頁面最底部(不能放在jquery庫之前)<script type="text/javascript">function add_ajaxmessage(){    var dataString =      'dh='+dh.value+ //表單的name和id值必須一致,注意:這一行最前面不能帶有'&'符號      '&yx='+yx.value+ //表單的name和id值必須一致,多個input請自行復制此行代碼      '&nr='+nr.value+ //表單的name和id值必須一致,多個input請自行復制此行代碼      '&action=post'+      '&diyid=1&do=2&dede_fields=dh,text;yx,text;nr,multitext&dede_fieldshash=ad50c1ee216430a63d64780d3e5e7262';    $.ajax({        type: "POST",        url: "/plus/diy.php",//提交到后臺文件        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>,這樣后臺返回的值就會以html的樣式顯示在id=666的div里面,(需要在php代碼中把showmsg更換為echo輸出,舉例:echo "<span style='color:#ff0000'>自定義表單不存在</span>";,這樣就會在id=666的元素中輸出紅色的“自定義表單不存在”看圖1。)

 
詳解:代碼中有些地方需要和你的自定義表單數值進行替換,下面我用顏色來標注進行區分,請自行替換。

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


表單代碼(和上面的ajax代碼對照并替換一致):
<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">內容:</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>

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 集安市| 桐乡市| 金乡县| 芷江| 娄底市| 旺苍县| 夏河县| 五华县| 滁州市| 彭山县| 儋州市| 建水县| 宣城市| 大丰市| 罗田县| 巩义市| 武宣县| 特克斯县| 泸州市| 鄂温| 庆阳市| 邢台市| 襄汾县| 荣昌县| 宿迁市| 西贡区| 瓮安县| 青浦区| 西林县| 班玛县| 板桥市| 简阳市| 乐山市| 祥云县| 罗平县| 元朗区| 苏尼特左旗| 广宁县| 个旧市| 阿巴嘎旗| 微山县|