ajax與php互動的get和post兩種實現方式

來源:互聯網
上載者:User

初始化ajax對象   InitAjax.js 

/* 初始化一個xmlhttp對象 */
function InitAjax(){//ajax初始化
    var ajax=false;
    try{
        ajax=new ActionXObject("Msxml2.XMLHTTP");
    }catch(e){
        try{
            ajax=new ActionXObject("Miscrosoft.XMLHTTP");
        }catch(e){
            ajax=false;
        }
    }
    if(!ajax&&typeof XMLHttpRequest!='undefined'){
        ajax=new XMLHttpRequest();
    }
    return ajax;
}

===================================

調用頁面  index.php

 

<!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>無標題文檔</title>

<script src="InitAjax.js" type="text/javascript"></script>

<script type="text/javascript">

//擷取新聞(AJAX的GET方式)
function getNews(newsID)
{
    //如果沒有把newsID參數傳過來
    if(typeof(newsID) == 'undefined')
    {
        return false;
    }
    
    var url = "show.php?tag=show&id=" + newsID;        //需要進行ajax的URL地址    
     var ajax = InitAjax();                            //執行個體化Ajax對象
     ajax.open("GET", url, true);                    //使用Get方式進行請求
    ajax.onreadystatechange = updatePage;            //調用執行狀態
    ajax.send(null);                                 //向伺服器發出請求
        
    //擷取執行狀態
     function updatePage()
    {
        //處於請求處理結束前,顯示LODDING圖
        if(ajax.readyState < 4)
        {
            show_news.innerHTML = "<img src=lodding.gif>";
        }
        
        //請求處理結束,那麼就把返回的內容賦值給上面指定的層
          if (ajax.readyState == 4 && ajax.status == 200)
        {
               show_news.innerHTML = ajax.responseText;
          }
     }
    
}

//添加新聞(AJAX的POST方式)
function saveUserInfo()
{
     var msg = document.getElementById("msg");    //擷取接受返回資訊層

     //擷取表單對象和使用者資訊值
     var f = document.user_info;
     var userName = f.user_name.value;
     var userAge  = f.user_age.value;
     var userSex  = f.user_sex.value;
 
     var url2 = "show.php?tag=add";                                                                //接收表單的URL地址
     var postStr  = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;        //需要POST的值,把每個變數都通過&來聯結
     var ajax2 = InitAjax();                                                                    //執行個體化Ajax
     ajax2.open("POST", url2, true);                                                            //通過Post方式開啟串連
     ajax2.onreadystatechange = updatePage2;                                                    //調用執行狀態
     ajax2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");                //定義傳輸的檔案HTTP頭資訊
     ajax2.send(postStr);                                                                         //向伺服器發出請求

     //擷取執行狀態
     function updatePage2()
     {
        if (ajax2.readyState == 4 && ajax2.status == 200)
        {
            msg.innerHTML = ajax2.responseText;
        }
     }
}
</script>
</head>

<body onload="saveUserInfo(); getNews(5); ">
<a onClick="getNews(5)" style="cursor:pointer">新聞1</a>
<div id="show_news"></div>

<form name="user_info">
 姓名:<input type="text" name="user_name" /><br />
 年齡:<input type="text" name="user_age" /><br />
 性別:<input type="text" name="user_sex" /><br />
 <input type="button" value="提交" onClick="saveUserInfo()">
</form>
<div id="msg"></div>
</body>
</html>

============================

 服務端執行頁面 show.php

 

<?php
include_once 'DB.class.php';
$tg = new DB('localhost', 'root', 'wangxiang', 'fenghua', 'UTF8');

if($_GET[tag]=='show')
{
    $sql = "SELECT Id, title from news limit 0," . $_GET[id];
    mysql_query("set names 'utf8'");
    $item = $tg->getAll($sql);
    
    sleep(1); //暫停1秒
    
    for($i=0; $i<count($item); $i++)
    {
        echo "<a href=news.php?nid={$item[$i]['Id']}>{$item[$i]['title']}</a><br>";
    }
}
else if($_GET[tag]=='add')
{
    sleep(2);//暫停2秒
    if($_POST[user_name] != '' && $_POST[user_age] != '' && $_POST[user_sex] != '')
    {
        $sql = "insert into news (title, pic_path, content) values ('".$_POST[user_name]."', '".$_POST[user_age]."', '".$_POST[user_sex]."')";
        mysql_query("set names 'utf8'");
        $insert_id = $tg->insert($sql);
        
        if($insert_id > 0)
        {
            echo "插入成功!";
        }
    }
    else
    {
        echo "資料填寫不全";
    }
}
?>

 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.