織夢dedecms不跳轉無刷新用ajax提交自定義表單的方法【回顯】

1、將form元素的屬性action、enctype、method去掉,添加id="form",form元素就變爲<form id="form">

2、引入jquery庫:jquery-1.8.2.min.js

3、提交按鈕增加 οnclick="add_ajaxmessage()" 並把 type="submit" 修改爲 type="button" , 例如:

<input type="button" value="提 交" onclick="add_ajaxmessage()" />

4、刪除原表單中的這些表格

<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庫之前)

表單提交頁面左右代碼:

<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>


<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,例如,這樣後臺返回的值就會以html的樣式顯示在id=666的div裏面,(需要在php代碼中把showmsg更換爲echo輸出

舉例:echo "自定義表單不存在";,這樣就會在id=666的元素中輸出紅色的“自定義表單不存在")

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章