如何使用AJAX和PHP更新网页

时间：2016-05-12 23:34:17

标签： javascript php html ajax

我对html / css / javascript / php和其他一切都很新。我真的只懂java。目前，我在html（mattrb.com/cs）中设置了一个页面，该页面将数据发布到调用api并显示一些数据的php页面。 html是：

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="#db5945" name="theme-color">
    <!--<link type="text/css" rel="stylesheet" href="layout-styles.css"/>-->
    <title>float check</title>

    <style>
      body {
        background-color: #222222;
        color: #db5945;
      }

      #footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #042E64;
        background-color: #222222;
        height: 18px;
      }
    </style>
  </head>

  <body>
    <form action="apitest.php" method="post">
      <input type="text" name="id" placeholder="id">
      <input type="submit">
    </form>

    <div id="footer">
      <a href="http://steampowered.com">Powered by Steam</a>
    </div>
  </body>
</html>

和调用的php文件是：

<html>
<head>
  <meta content="#db5945" name="theme-color">
  <style>
    body {
      background-color: #222222;
      color: #db5945;
    }
  </style>
</head>
<body>
<?php
  $apikey = "XXXXXX-STEAM-API-KEY-XXXXX";

  $input = $_POST["id"];
  while (substr($input, strlen($input) - 1) == "/" || substr($input, strlen($input) - 1) == " ") {
    $input = substr($input, 0, strlen($input) - 1);
  }

  $steamid = "";

  function isInteger($input){
    return(ctype_digit(strval($input)));
  }

  if (strpos($input, "/id/") !== false || isInteger(substr($input, strlen($input) - 17)) == false) {
    $pos = 0;
    if (strpos($input, "/id/") !== false) {
      $pos = strrpos($input, "d/") + 2;
    }

    $vanityurl = substr($input, $pos);
    $steamidAPI = "http://api.steampowered.com/ISteamUser/ResolveVanityURL/v0001/?key=" . $apikey . "&vanityurl=" . $vanityurl;
    $responseid = json_decode(file_get_contents($steamidAPI));

    $steamid = $responseid->response->steamid;
  } else {
    $steamid = substr($input, strlen($input) - 17);
  }

  echo("steamid: " . $steamid . "<br><br>");

  $playerItemsAPI = "http://api.steampowered.com/IEconItems_730/GetPlayerItems/v0001/?key=" . $apikey . "&SteamID=" . $steamid;

  do {
    $playerItems = json_decode(file_get_contents($playerItemsAPI));
  } while (is_null($playerItems));

  $inventoryAPI = "http://steamcommunity.com/profiles/" . $steamid . "/inventory/json/730/2";
  $inventory = json_decode(file_get_contents($inventoryAPI));

  $names = array();
  $float = array();
  $cases = 0;
  $keys = 0;

  for ($i = 0; $i < count($playerItems->result->items); $i++) {
    $id = $playerItems->result->items[$i]->id;
    $classid = $inventory->rgInventory->$id->classid;
    $instanceid = $inventory->rgInventory->$id->instanceid;
    $combination = $classid . "_" . $instanceid;
    $name = $inventory->rgDescriptions->$combination->market_name;

    if(substr($name, strlen($name) - 3, strlen($name)) == "Key") {
      $keys++;
    } else if (substr($name, strlen($name) - 4, strlen($name)) == "Case") {
      $cases++;
    } else {
      array_push($names, $name);
      if ($playerItems->result->items[$i]->attributes[2]->defindex == 8) {
        array_push($float, $playerItems->result->items[$i]->attributes[2]->float_value);
      } else {
        array_push($float, 0);
      }
    }
  }

  $tab = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";

  for ($j = 0; $j < count($names); $j++) {
    $someOutput = true;
    echo(strtolower($names[$j]) . "<br>");
    if ($float[$j] != 0) {
      echo($tab . $float[$j] . "<br>");
    }
  }

  echo("items: " . (count($names) + $keys + $cases) . "<br>");
  echo("items discounting keys/cases: " . count($names) . "<br>");
  echo("keys: " . $keys . "<br>");
  echo("cases: " . $cases . "<br>");

  echo("<br>if you expected something to<br>show up and nothing did, check<br>your inventory privacy settings");
?>
</body>
</html>

这就是我现在拥有的一切。我的目标是使用ajax使用ajax使用php文件中的数据更新html页面上的信息，而无需刷新页面。这可能吗？如果是这样，我该怎么做呢？

谢谢！

3 个答案:

答案 0 :(得分：2)

你几乎就在那里，现在你需要做的就是利用jQuery并运行一个ajax请求（$.post()）：

jQuery(document).ready(function(){
    jQuery(document).on('submit','form#your_form_id',function(e){
        e.preventDefault();

        // send post/ajax request
        jQuery.post( "apitest.php", jQuery(this).serialize(), function( data ) {
            console.log(data);
        });

        return false;
    });
});

备注

  • return false;会阻止您的表单通过正常流程提交。 （表示没有重定向到页面。）
  • 您需要将jQuery库与上述javascript文件一起包含在项目中。
  • jQuery(this).serialize()只是将表单元素格式化为要发布到提供的网址（apitest.php）的数据。
  • 您必须弄清楚要对返回的data做什么。现在它只会通过console.log(data);登录到控制台。
    • 对此的一般共识是使用$.html()并将返回的数据附加到文档某处的<div>。
    • 大多数人会发回JSON并妥善处理。你也可以这样做 - 它将允许更容易的数据操作。

答案 1 :(得分：1)

如果您想正确完成。

这里有很多地方。通常不遵守许多非常小的细节。但那就是互联网如此混乱的原因。盲人领导盲人。我花时间去做这个，因为你是新手。也许在盲人接近你之前，先获得一些好的技巧。

HTML 

<form>
  <legend>ID</legend><input id="id" type="text" name="id" placeholder="id">
  <button type="button" onclick="postit()">Submit</button>
</form>

如果您不想提交表单，则无法提交提交按钮。

JAVASCRIPT

或者你可以在jQuery中做到这一点。并保持在黑暗中。并且不必要地减慢页面加载时间。并且有一个噩梦被迫学习jQuery和javaScript以解决jQuery问题。或者只是简单地使用javaScript。

<script type="text/javascript">//<![CDATA[
var xmlhttp;
function postit(){
  var id=document.getElementById('id').value;
  xmlhttp=null;
  var Url="apitest.php"
  if (window.XMLHttpRequest) {
      xmlhttp=new XMLHttpRequest();
  }
  else if (window.ActiveXObject) { 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (xmlhttp!=null) {
    xmlhttp.onreadystatechange=getResponse;
     xmlhttp.open("POST", Url, true);
     xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
     xmlhttp.send( "id=" + id);  
  } else {
     alert("UNEXPECTED ERROR: XMLHttpRequest not supported");
  }
}
function getResponse(){
  if (xmlhttp.readyState==4){
    if (xmlhttp.status==200){
      var json = JSON.parse(xmlhttp.responseText);
      var items = json['items'];
      var discount= json['discount'];
      var keys= json['keys'];
      var cases= json['cases'];
    }
    else{
      alert("UNEXPECTED AJAX ERROR: : " + xmlhttp.statusText + "HTTP Status: " + xmlhttp.status);
    }
  }
}
//]]>
</script>

var xmlhttp必须是全局的，因此可以在两个函数中使用。

PHP返回值

替换：

  echo("items: " . (count($names) + $keys + $cases) . "<br>");
  echo("items discounting keys/cases: " . count($names) . "<br>");
  echo("keys: " . $keys . "<br>");
  echo("cases: " . $cases . "<br>");

使用：

$return['items'] = count($names) + $keys + $cases;
$return['discount'] = count($names) ;
$return['keys'] = $keys ;
$return['cases'] = $cases ;
header(header('Content-Type: text/json; charset=utf-8');
echo json_encode($return);

我注意到的其他东西

替换：

  while (substr($input, strlen($input) - 1) == "/" || substr($input, strlen($input) - 1) == " ") {
    $input = substr($input, 0, strlen($input) - 1);
  }

使用：

$input = rtrim($_POST["id"]," /");

更改

$inventory = json_decode(file_get_contents($inventoryAPI));
$playerItems = json_decode(file_get_contents($playerItemsAPI));

到

$inventory = json_decode(file_get_contents($inventoryAPI),1);
$playerItems = json_decode(file_get_contents($playerItemsAPI),1);

现在$ inventory和$ playerItems是数组。

for ($i = 0; $i < count($playerItems->result->items); $i++) {
  $id = $playerItems->result->items[$i]->id;

变为

foreach($playerItems['results']['items'] as $id){

答案 2 :(得分：0)

在HTML文件中，您需要一个Javascript函数来使用对PHP文件的ajax调用，以及echo php文件的结果，将它放在html文档中的Div中。 检查此链接http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first只需更改＆＃34; ajax_info.txt＆＃34;对于PHP文件，但基本上就是你如何使用ajax调用。 这里功能的基础知识： http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

相关问题
最新问题