使用来自AJAX的数据回复PHP脚本(JSON)

时间:2016-10-23 04:15:36

标签: javascript php jquery html ajax

措辞可能有点偏。我试图使用Battle.NET API来检索有关字符的一些信息。我有一台服务器'字段和字符名称'字段。

我已经审核了一些类似的问题,例如this one,也许这只是我的PHP新手,但我对如何正确地做这件事感到困惑。我还不确定如何解决PHP错误。

我所做的是将HTML + PHP设计为嵌入到一个“PHP”中。文件。 工作。然后我将它们分成index.html + test.php 它工作 这个问题的主要问题是一些事情 - 我没有做出回应,我只是回应了#39;回复'响应。这似乎是在JSON中

 {"lastModified":1477156067000,"name":"Thischaracter","realm":"Thisrealm","battlegroup":"Thisbattlegroup","class":1,"race":6,"gender":0,"level":110,"achievementPoints":20805,"thumbnail":"thrall/50/129432626-avatar.jpg","calcClass":"Z","faction":1,"totalHonorableKills":8657}

所以流程必须是HTML表单 - 提交 - > AJAX - > PHP表单(这与我的经验和#34;相同,因为我从未对响应做过任何事情) - >可能从PHP数据中获取getJSON? - > HTML输出。我提到了AJAX,因为我不希望页面更新。只是一个' div' div或LI即将更新。

index.html - 我在发布此处之前修改了此表单以删除额外的无意义。

<form action="testingApiForBnet.php" method="post" id="myForm">
      <p class="inp-wrap search-wrap">
        <label for="search-field" class="search-label grid-25">Find</label>
        <input type="search" name="search-term" id="charSearch" class="grid-75"/></p>
      <p class="inp-wrap cat-wrap">
        <label for="categories" class="grid-20">on</label>
        <select name="search categories" id="servers" class="grid-80">
        </select>
      </p>
      <submit name="SubmitButton">
    </form>

testAPI.php

<?php
if(isset($_POST['SubmitButton']))
 {
 $charName = $_POST['charName'];
  ##$_POST['charName'];
$server = $_POST['servers'];
  ##$_POST['server'];
$bnetAPI = "https://us.api.battle.net/wow/character/";
$apiKey = "apiKeyWouldGoHere";
// Example https://us.api.battle.net/wow/character/$Server/$CharName?locale=en_US&apikey=$apiKey//
$request = $bnetAPI . urlencode($server) .'/'.$charName .'?locale=en_US&apikey=' . $apiKey ;
$response  = file_get_contents($request);
$jsonobj  = json_decode($response);
}
 ?>

&#39; json_decode&#39;和&#39; file_get_contents&#39;我从另一个线程得到,因为我得到了非对象响应。那些$ jsonobj正在推出我上面链接的对象。

test.js

$(document).ready(function () {
$('#myForm').on('submit', function(e) {
  e.preventDefault();
    $.post('testAPI.php', $(this).serialize(), function (data) {
      alert(data);
     console.log(data)
    return false;
    })
});
});

直到&#34;功能(数据)&#34;这个脚本实际上取自我成功运作的另一种形式。当我点击提交时没有发生任何事情 - 没有重定向,没有响应,没有console.log - 我觉得它是因为我正在发布,它需要获取但是我还是得到了&#39;什么&#39;来自数据?

会感激任何意见。除非我直接运行PHP脚本,否则仍然无法解决PHP问题。我觉得这只是语言中的功能。

谢谢!

更新Placeholder.php

<?php
if (!empty($_POST)) {
 $charName = $_POST['charName'];
  ##$_POST['charName'];
$server = $_POST['servers'];
  ##$_POST['server'];
$bnetAPI = "https://us.api.battle.net/wow/character/";
$apiKey = "key";
// Example https://us.api.battle.net/wow/character/Thrall/Teodoro?locale=en_US&apikey=$apiKey//
$request = $bnetAPI . $server .'/'.$charName .'?locale=en_US&apikey=' . $apiKey ;
$response  = file_get_contents($request);
$jsonobj  = json_decode($response);
header('Content-Type: application/json');
  echo $response;
  exit();
}
?>

UPDATE index.html(只是JS部分)

$(document).ready(function () {
  $('#myForm').submit(function (e) {
    e.preventDefault();

    $.post('test2.php', $(this).serialize(), function (data) {
     console.log(typeof(data));
      if (typeof data === 'string')
        data = JSON.parse(data);
      if (typeof data !== 'object') {
        console.log("failed to parse data");
        return;
      }
    data = JSON.parse(data);
   console.log(data);
    });
   /*

   */
   console.log('Data is not returning.');
    return false;
  });
});

1 个答案:

答案 0 :(得分:3)

您的jQuery代码是指具有myForm ID的表单,但您尚未将ID分配给表单。因此,您应该添加id属性,如下所示

<form id="myForm">

接下来,您必须修复发布到的网址。它应该是testAPI.php,而不是text.php

$('#myForm').submit(function (e) {
  e.preventDefault();
  $.post('testAPI.php', function (data) {
    // ...
  });
})

由于您绑定onsubmit并自行处理发布请求,因此您可能不需要表单中的actionmethod属性。由于testAPI.php返回JSON内容,您需要在请求处理程序中对其进行解码。此外,通过$.post()调用,您不会向服务器发送任何数据。它只是一个空的POST请求。您必须将序列化表单作为第二个参数传递:

<强> test.js

$('#myForm').submit(function (e) {
  // note, `this` variable refers to the form node.
  e.preventDefault();
  $.post('testAPI.php', $(this).serialize(), function (data) {
    if (typeof data === 'string')
      data  = JSON.parse(data);
    console.log(data);
  });
  return false;
})

代码解析data,如果它是一个字符串。如果响应返回data(实际上,它是JSON数据的正确MIME类型),jQuery处理程序可以将Content-Type: application/json作为Object传递。所以我建议你在testAPI.php中修改MIME类型,是的,你应该打印响应而不是解码(除非你需要修改它):

header('Content-Type: application/json');
echo $response; // supposed to be a JSON string
exit();

但是,如果您需要修改后的响应,请再次对其进行解码,修改和编码:

header('Content-Type: application/json');
$response = json_decode($response, true);
$response['something'] = 'somevalue';
// unset($response['redundant_field']);
header('Content-Type: application/json');
echo json_encode($response); // supposed to be a JSON string
exit();

实施例

<强> test.php的

<?php
if (!empty($_POST)) {
  $search_term = $_POST['search-term'];
  $category = $_POST['category'];

  $fake_response = [
    'term' => $search_term,
    'cat' => $category,
    'somethingelse' => date('r'),
  ];

  header('Content-Type: application/json');
  echo json_encode($fake_response);
  exit();
}
?>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Test</title>
  <script
          src="https://code.jquery.com/jquery-3.1.1.min.js"
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous"></script>
</head>
<body>
  <form id="myForm">
    <input type="search" name="search-term" id="charSearch"/>
    <select name="category" id="servers">
      <option value="optA" selected>optA<option>
      <option value="optB">optB</option>
    </select>
  <input type="submit" name="SubmitButton"/>
  </form>
  <script>
$(document).ready(function () {
  $('#myForm').submit(function (e) {
    e.preventDefault();

    $.post('test.php', $(this).serialize(), function (data) {
      if (typeof data === 'string')
        data = JSON.parse(data);
      if (typeof data !== 'object') {
        console.log("failed to parse data");
        return;
      }
      console.log(data);
    });
    return false;
  });
});
  </script>
</body>
</html>

示例输出(在浏览器的控制台中)

Object { term: "rr", cat: "optA", somethingelse: "Sun, 23 Oct 2016 05:10:50 +0000" }