使用数据从AJAX回复到PHP脚本(JSON)


Using data from AJAX Reply to a PHP Script (JSON)

措辞可能有点不合适。我想利用战斗。. NET API检索有关字符的一些信息。我有一个"服务器"字段,和一个"字符名"字段。

我已经回顾了一些类似的问题,比如这个问题,也许这只是我的PHP新手,但我对如何正确地做到这一点感到困惑。我仍然不确定如何排除PHP错误。

我所做的是设计HTML + PHP嵌入到一个' PHP '文件。。然后我把它们分成index.html + test.php ,它工作了主要问题是一些事情-我没有渲染响应,我只是让它"回声"响应。这似乎是在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表单(这是我的"经验",因为我从来没有做过任何响应)->也许从PHP数据的getJSON ?-> HTML输出。我提到AJAX是因为我不希望页面更新。只是一个'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);
}
 ?>

我从另一个线程得到的'json_decode'和'file_get_contents',因为我得到了非对象响应。通过这些$jsonobj输出我上面链接的对象。

. 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;
    })
});
});

直到"函数(数据)"这个脚本实际上是从另一种形式,我已经成功地工作。目前,当我点击提交时什么都没有发生——没有重定向,没有响应,没有console.log——我觉得这是因为我在发布,它需要GET,但我仍然会从数据中得到"一些东西"?

将感谢任何输入。也仍然无法排除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();
}
?>

更新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;
  });
});

您的jQuery代码引用了一个具有myForm ID的表单,但您没有将ID分配给表单。因此,您应该像下面这样添加id属性

<form id="myForm">

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

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

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

. 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,如果它是一个字符串。如果响应返回Content-Type: application/json(实际上,是JSON数据的正确MIME类型),jQuery处理程序可能会将data作为对象传递。所以我建议你在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" }