Ajax方法显示错误的输入

时间:2012-06-26 21:14:51

标签: php javascript ajax

我再次提出一个问题,我没有得到满意的答案:

我是AJAX方法的新手。我想发布一些由php页面处理的信息,称之为page.php

在我的html页面中,我已经输入了这段代码:

<script type="text/javascript" charset="utf-8">
//I have put the function getXMLHttpRequest() on a separate js file
function getXMLHttpRequest() {
    var xhr = null;

    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
            xhr = new XMLHttpRequest(); 
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }

    return xhr;
}

function request(callback) {
    var xhr = getXMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
            callback(xhr.responseText);
        }
    };

    xhr.open("POST", "page.php", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("name=proposition");
}

function postData(Data) {

    alert(Data);

}
</script>

<button onclick="request(postData);">...</button>

在page.php中,我有一个方法

function comment(){
  //some code processing the posted infos (that works fine)...
  //to debug, I have put a
  echo('Hello world');
}

更确切地说:page.php的结构是page.php?page='mypage'&post='post'。所以首先是mypage.php的方向,然后在mypage.php中有一个类的实例化。 __construct方法使用post变量来调用类comment()中的方法。

事实上,我没有得到任何“Hello world”,但是显示了我所有网页代码的巨大警报消息。 有人有想法吗?

Best,Newben

1 个答案:

答案 0 :(得分:2)

我同意mkk并强烈建议使用jQuery来解决Ajax问题 - 它可以帮助您解决很多问题,并安全地为您解决容易出错的问题。你的头部只需要一行就可以导入它:

<head>
  ...
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  ...
<head>
<body>

<script>
  $('#my-btn').click(function() {

    var data = {'key1':'value1','key2':'value2','key3':'value3'};

    $.post('page.php', data, function(callback_data){
      alert(callback_data);
    });

  });
</script>

<button id="my-btn">Make an Ajax request!</button>

<body>

在page.php中:

<?php
  echo 'The following data was sent: <br />';
  print_r($_POST);

通常你想从DB中获取一些数据,然后将它写入你的前端。在这种情况下,使用JSON很常见。 实际上你应该只看一些有用的jQuery函数,比如post()serialize(),它们有很多很好的例子可以让你对这些函数有所了解。如果你不喜欢jQuery,那很好,你在使用'普通'JavaScript时甚至都不会注意到它。但是当谈到Ajax-Requests时,你真的应该使用jQuery。谈到JSON,您可能还需要服务器端的json_encode()

实际上一般来说很难引导你,请稍微熟悉一下这些技巧,如果你遇到一些很难在Google上提出的问题,请回来。