一個簡單的ajax|jquery實現的留言板(未做安全驗證)

來源:互聯網
上載者:User

聲明:目前程式0.0版本僅為實驗,並沒有對使用者輸入進行處理,在1.0計劃加入以下功能:

1.正則匹配驗證email,url

2.特殊字元轉義,過濾

3.加入驗證碼功能


程式清單:

1.index.php 代碼核心部分是<script></script>標籤中的ajax。參見http://api.jquery.com/jQuery.ajax/

通過向post.php傳值,然後用$('#messages').load("messages.php")以ajax的方式更新id = messages 的div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Message Board</title><script language="JavaScript" type="text/javascript" src="js/jquery.js"></script><script language="JavaScript" type="text/javascript" src="js/jquery.timer.js"></script><link href="css/style.css" rel="stylesheet" /><script type="text/JavaScript">function postData(){    var name = $('#name').val();    var email = $('#email').val();var website = $('#website').val();var message = $('#message').val();var captcha_code = $('#captcha_code').val();var dataString = 'name='+ name + '&email=' + email + '&website=' + website + '&message=' + message + '&captcha_code=' + captcha_code;      $.ajax({      type: "POST",       url: "post.php",      data: dataString,        success: function(data) {      console.log('OK: ' + data);        },     error: function(jqXHR, textStatus, errorThrown) {        console.log('Error: ' + data);     }  });return true;}$(document).ready(function(){    $(".button").click(function() {     if(postData()){$('#messages').load("messages.php"); };  return false;  });  });</script></head><body><div id="stylized" class="myform"><form id="form" name="form" action="#" method="post"><h1>Post your message</h1><p id="error">Please complete the form below</p><label>Name</label> <input name="name" type="text" id="name" /> <label>Email</label><input name="email" type="text" id="email" /> <label>Website<spanclass="small">yourwebsite.com</span></label> <input name="website" type="text" id="website"value="http://" /> <label>Message (Character count: <span id="count">0</span>)</label><textarea name="message" id="message"></textarea><label>Security Code <span class="small">Click to refresh</span></label> <a href="#" onclick="refreshCaptcha();"><span id="cap"></span></a> <label>Re-type Security Code <span class="small">(casesensitive)</span></label> <input name="captcha_code" type="text" id="captcha_code"size="10" maxlength="10" /><button type="submit" class="button">Submit</button><div class="spacer"></div></form></div><div style="float: left"><div id="messages" class="messages"><!-- posted messages display here --></div></div></body></html>

2.post.php

<?phpinclude ("config.php");if(isset($_POST['name'])){$name = $_POST['name'];}else{$name = "";}if(isset($_POST['email'])){$email = $_POST['email'];}else{$email = "";}if(isset($_POST['captcha_code'])){$security_code = $_POST['captcha_code'];}else{$security_code = "";}if(isset($_POST['website'])){$website = $_POST['website'];}else{$website = "";}if($website=='http://'){$website = "";}if($website!=''){//if (strpos($website,"http://")==false){//$website = "http://".$website;//}}if(isset($_POST['message'])){$message = $_POST['message'];}else{$message = "";}$ip=$_SERVER['REMOTE_ADDR'];$insert = "INSERT INTO message_board(name, email, url, post_date, message, ip_address) VALUES('$name', '$email', '$website', now(), '$message', '$ip')";$mysql_insert = mysql_query($insert)or die("<b>A fatal MySQL error occured</b>.\n<br />Query: " . $query . "<br />\nError: (" . mysql_errno() . ") " . mysql_error());exit;?>
 3.messages.php

<?PHPrequire_once('config.php');//echo "<p>Messages loaded: ".date("d/m/y : H:i:s", time())."</p>";if(isset($_GET['offset'])){$offset = $_GET['offset'];}else{$offset=0;}$numresults=mysql_query("SELECT * FROM message_board");$numrows=mysql_num_rows($numresults)or die ("Currently you do not have any items.");$query="SELECT * FROM message_board ORDER BY id desc limit $offset,$limit";//pagination$result=mysql_query($query);$num=mysql_num_rows($result);mysql_close();//echo "<h1>Showing 10 of $num comments</h1>";$i=0;if ($num > 0){echo '<ol style="list-style-type: none;">';while ($i < $num) {$id=mysql_result($result,$i,"id");$date=mysql_result($result,$i,"post_date");$email=mysql_result($result,$i,"email");$url=mysql_result($result,$i,"url");$name=stripslashes(mysql_result($result,$i,"name"));$message=stripslashes(mysql_result($result,$i,"message"));echo "<li>";//if ($email!="")://echo "by <b><a href=mailto:$email target=_blank>$name</a></b><br>";//else:echo "<cite>$name</cite> says:<br>";//endif;echo "On $date<br>";if ($url!="") {echo "URL: <a href=\"$url\" target=\"_blank\">$url</a><br>";}echo "<p>$message</p>";echo "</li>";$i++;}echo '</ol>';// create paging links belowecho '<p class="button-link">';if ($offset >= $limit) {$prevoffset = $offset - $limit;echo "<a href=\"#\" onclick=\"loadMessages($prevoffset);\">Back</a> \n";}$pages=intval($numrows/$limit);if ($pages < ($numrows/$limit)){$pages=($pages + 1);}//show next if not lastif (! ( ($offset/$limit) == ($pages - 1) ) && ($pages != 1) ) {$newoffset = $offset+$limit;echo "<a href=\"#\" onclick=\"loadMessages($newoffset);\">Next</a>\n";}echo '</p>';}else{echo "No entry yet.";}?>




相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.