PHP実践戦闘_PHPチュートリアル 4日目

それでは、まず写真を見てみましょう。これは ajax の掲示板です (笑)。

1. 今日はjqueryのajaxを学び、直接コーディングを始めました

[php] / JavaScript ドキュメント
$(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',
タイプ: 「POST」、
データ型: 'json'、
データ: {
ユーザー名: strUsetName、
コンテンツ: strContent、
メールアドレス: strEmail
}、
成功: 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");                                                                                                                                                                                                     alert('操作プロンプト、メッセージが失敗しました! エラー メッセージ:'+json.error);                                                                                                                                                     })
}); //メッセージの動的ロード
もっとロード(); });
//スクロールバーのスクロールを監視します
$(ウィンドウ).scroll(function() {
// 下から 100 ピクセル上にスクロールすると、新しいコンテンツがロードされます
If ($(document).height() - $(this).scrollTop() - $(this).height()
}; });


fy = 0; 関数loadMore() {

//アラート(fy); $.getJSON("index.php?m=index&a=data&page=" + fy + "&rand=" + Math.random(), function(json) {

for (var i = 0; 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) + '

'; 
    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()   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    //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->e​​rror(); //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->e​​rror();
//die($this->db->error());//失敗時の出力エラーメッセージを追加
}
}
echo json_encode($json);
//var_dump($_POST);
これはメッセージ部分のコードです。ブラウザを更新せずに、メッセージを残した後、ページ上で直接効果を確認できます。笑。



2. 今日学んだPHP関数

[php]  json_encode();

说明

string json_encode ( mixed $value [, int $options = 0 ] )

戻るvalue JSON 形式の値< ;/ P>

empty() 値が空の場合は True を返します。値がある場合は false を返します

time() タイムスタンプを取得

mysql_insert_id() は最後の操作の増分フィールドを返しますID

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 class="brush:php;toolbar:false">
<p>
前>
</p>
<p><br><br>http://www.bkjia.com/PHPjc/477418.html<br><br>www.bkjia.com</p>本当<p align="left"></p><div style="display:none;">http://www.bkjia.com/PHPjc/477418.html<span id="url" itemprop="url"></span>技術記事<span id="indexUrl" itemprop="indexUrl"></span>さて、上の写真を見てみましょう。これはウォーターフォール フロー効果を持った ajax 掲示板です。 1. 今日は jquery の ajax を学び、それを直接コーディングしました。 [php] / JavaScript Document $(document).ready (関数( e...<span id="isOriginal" itemprop="isOriginal"></span><span id="isBasedOnUrl" itemprop="isBasedOnUrl"></span>
<span id="genre" itemprop="genre"></span>
</div>