1. 今日はjqueryのajaxを学び、直接コーディングを始めました
' + json[i]['userName'] + '
' + json[i]['content'] + '
' + getLocalTime(json[i]['time']) + '
'
//alert(content);
$("div #liuyan").append(createTag(json[i]['userName'],json[i]['content'],json[i]['time']));
loadHiglight();
};
});
}
function loadHiglight() {//为了ajax后重载特效
$user = $("div .user");
$text = $("div .text");
$("div .content").each(function(index) {
$(this).mousemove(function() {
$user.eq(index).css("color", "#0A8CD2");
// $user.eq(index).css("background","#FFE6AD");
// $text.eq(index).css("background","#FFFDF6");
}).mouseout(function() {
$user.eq(index).css("color", "#000");
// $user.eq(index).css("background","#E6F0F9");
// $text.eq(index).css("background","#F8FBFD");
});
});
}
function createTag(usetName, content, time) {
var strTag = '
' + usetName + '
' + content + '
' + getLocalTime(time) + '
';
return strTag;
}
function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
}
// JavaScript Document
$(document).ready(function(e) {
loadHiglight();//载入高亮特效
$("#submit").click(function() { //“留言”按钮单击事件
//获取用户名称
var strUsetName = $("#userName").val();
//获取输入留言内容
var strContent = $("#content").val();
//获取输入邮箱
var strEmail = $("#email").val();
//开始发送数据
$.ajax({
url: 'index.php?m=index&a=add',
type: 'POST',
dataType: 'json',
data: {
userName: strUsetName,
content: strContent,
email: strEmail
},
success: function(json, textStatus, xhr) {
if (json.state=='ok') {
alert('操作提示，留言成功！');
//alert();
var data=json.data[0];
var strTag=createTag(data.userName,data.content,data.time);
$(strTag).prependTo('div #liuyan');
//$("Hello World!").prependTo("p");
}else{
alert('操作提示，留言失败！\n错误信息:'+json.error);
}
}
})
});
//动态载入留言
loadMore();
});
//监视滚动条滚动
$(window).scroll(function() {
// 当滚动到最底部以上100像素时， 加载新内容
if ($(document).height() - $(this).scrollTop() - $(this).height() < 5) {
loadMore();
};
});
fy = 0;
function loadMore() {
fy++;
//alert(fy);
$.getJSON("index.php?m=index&a=data&page=" + fy + "&rand=" + Math.random(), function(json) {
for (var i = 0; i <= json.length - 1; i++) {
//alert(json[i]['userName']);
//content = '
' + json[i]['userName'] + '
' + json[i]['content'] + '
' + getLocalTime(json[i]['time']) + '
';
//content='
'
//alert(content);
$("div #liuyan").append(createTag(json[i]['userName'],json[i]['content'],json[i]['time']));
loadHiglight();
};
});
}
function loadHiglight() {//为了ajax后重载特效
$user = $("div .user");
$text = $("div .text");
$("div .content").each(function(index) {
$(this).mousemove(function() {
$user.eq(index).css("color", "#0A8CD2");
// $user.eq(index).css("background","#FFE6AD");
// $text.eq(index).css("background","#FFFDF6");
}).mouseout(function() {
$user.eq(index).css("color", "#000");
// $user.eq(index).css("background","#E6F0F9");
// $text.eq(index).css("background","#F8FBFD");
});
});
}
function createTag(usetName, content, time) {
var strTag = '
' + usetName + '
' + content + '
' + getLocalTime(time) + '
';
strTag を返します;
}
関数 getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:d{1,2}$/, ' ');
}リクエストメソッドはです
[php] 関数 data()
{
//ページングクラスの紹介
「page.class.php」を含めます
//データテーブル内のデータ数を取得します
$rows = $this->db->count('select * from data');
//ページングオブジェクトを作成する
$page = 新しいページ($rows, 5, "");
$list=$this->db
->order('id DESC')
//->table('data')
->limit($page->getLimit())
->select();
/*
echo "
";<br>
var_dump($list);<br>
echo "
";
*/
エコー json_encode($list);
終了();
}
関数data()
{
//ページングクラスを導入します
「page.class.php」をインクルードします;
//データテーブル内のデータ数を取得します
$rows = $this->db->count('select * from data');
//ページングオブジェクトを作成します
$page = 新しいページ($rows, 5, "");
$list=$this->db
->order('id DESC')
//->table('data')
->limit($page->getLimit())
->select();
/*
echo "
";<br>
var_dump($list);<br>
echo "
";
*/
echo json_encode($list);
exit();
}
このようにして、滝の流れの効果が得られます。欠点は、最後までロードするとプロンプトが表示されないことです。ははは、
[php] 関数 add(){
// 追加後に影響を受ける項目の数を返します。0 より大きい場合は、追加が成功したことを意味します
$json['state']='no';
If (empty($_POST['userName'])) {
$json['error']='ユーザー名が入力されていません';
}elseif(empty($_POST['content'])){
$json['error']='メッセージの内容が入力されていません';
}elseif(empty($_POST['email'])){
$json['error']='メールアドレスが入力されていません';
}その他{
isset($_POST['content'])?$_POST['content']=nl2br($_POST['content']):"";
$_POST['time']=time();
If($this->db->data($_POST)->add()>0){
/*
echo "正常に追加されました";
// echo "<script>location.reload()</script>";//更新されたフォームを繰り返し送信しないようにします
Header("HTTP/1.1 303 その他を参照");
Header("Location: ") //ルートディレクトリにリダイレクトします
;
終了します;
$json['state']='ok';
$json['data']=$this
->データベース
->テーブル('データ')
->where('id='.$this->db->last_insert_id())
->select();
$json['error']=$this->db->error();
//die($this->db->error());//失敗時の出力エラーメッセージを追加
エコー json_encode($json);
//var_dump($_POST);
}
関数追加(){
//追加後、影響を受けるアイテムの数を返します。0 より大きい場合、追加は成功したことを意味します
$json['state']='no';
If (empty($_POST['userName'])) {
$json['error']='ユーザー名が入力されていません';
}elseif(empty($_POST['content'])){
$json['error']='メッセージ内容が入力されていません';
}elseif(empty($_POST['email'])){
$json['error']='メールアドレスが入力されていません';
}その他{
isset($_POST['content'])?$_POST['content']=nl2br($_POST['content']):"";
$_POST['時間']=時間();
If($this->db->data($_POST)->add()>0){
/*
echo "正常に追加されました";
//echo "<script>location.reload()</script>";//更新されたフォームを繰り返し送信しないようにします
Header("HTTP/1.1 303 その他を参照");
Header("Location: "); //ルートディレクトリにリダイレクトします
終了します;
*/
$json['state']='ok';
$json['data']=$this
->データベース
->テーブル('データ')
->where('id='.$this->db->last_insert_id())
->select();
}その他{
$json['error']=$this->db->error();
//die($this->db->error());//失敗時の出力エラーメッセージを追加
}
}
echo json_encode($json);
//var_dump($_POST);
これはメッセージ部分のコードです。ブラウザを更新せずに、メッセージを残した後、ページ上で直接効果を確認できます。笑。
2. 今日学んだPHP関数
[php] json_encode();
说明
string json_encode (
mixed $value [,
int $options = 0 ] )
json_encode(); 説明 string json_encode (mixed $value [, int $options = 0 ] ) は、JSON 形式の value を返します empty() 値が空の場合は true を返し、値が存在する場合は false を返します。
time() はタイムスタンプを取得します
mysql_insert_id() は、最後の操作でインクリメントされたフィールドの ID を返します
3. 今日学んだJavaScript関数、この関数はタイムスタンプを変換するために使用されます。
[javascript] 関数 getLocalTime(nS) {
新しい Date(parseInt(nS) * 1000).toLocaleString().replace(/:d{1,2}$/, ' '); を返します。
}
jquery の append() は、タグ内の最後の HTML をロードするために使用されます
prependTo() は HTML コードをタグの先頭にロードします
関数 getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:d{1,2}$/, ' ');
}
jqueryのappend()はタグ内の最後のHTMLをロードするために使用されます
prependTo() は HTML コードをタグの先頭に読み込みます
4. 今日得た経験は、ajax が Web ページのタグをロードした後、jquery の特殊効果が消えるということです。したがって、ajax が Web ページのタグをロードした後、jquery のイベントと関数を再バインドする必要があります。そうしないと、特殊効果が失われます。
[javascript]
<PRE class=javascript name="code">
<PRE
<PRE
http://www.bkjia.com/PHPjc/477418.html
www.bkjia.com
本当
http://www.bkjia.com/PHPjc/477418.html技術記事さて、上の写真を見てみましょう。これはウォーターフォール フロー効果を持った ajax 掲示板です。 1. 今日は jquery の ajax を学び、それを直接コーディングしました。 [php] / JavaScript Document $(document).ready (関数( e...
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
