无法让AJAX和PHP正常工作

时间:2016-12-08 22:36:40

标签: javascript php jquery html ajax

所以这是场景:

我有HTML,JS和PHP文件。在PHP文件中是一个默认值的关联数组,用于填写HTML文件中的各种表单元素。我试图使用AJAX从PHP文件中获取文件,并将它们放在相应的表单元素中。然而没有任何工作.....

以下是相应文件的代码。非常感谢任何帮助解决这个问题:)

HTML

<html>
  <body>  
    <h1>Form Validation</h1>

    <form id="PersonForm">
      Name: <input type="text" id="name" name="name"> <br>
      Postal Code: <input type="text" id="postal" name="postal"> <br>
      Phone Number: <input type="text" id="phone" name="phone"> <br>
      Address: <input type="text" id="address" name="address"> <br>
      <input type="submit">
    </form>

    <a href="frontend.html">Refresh</a> 
    <a id="InsertDefault" href="">Insert Default Data</a>
    <br>

    <ul id="errors"></ul>
    <p id="success"></p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

PHP

<?php

// Return JSON default data if requested
if ($_REQUEST['act'] == 'default')
{
  $defaultData = array('name' => "Jane",
                   'postal' => "L5B4G6",
                   'phone' => "9055751212",
                   'address' => "135 Fennel Street");

  echo json_encode($defaultData);
}
?>

JAVASCRIPT

$(document).ready(function()
{

  $("#InsertDefault").click(function()
  {      
     // make an AJAX call here, and place results into the form
    $.post('backend.phps', 
        { act: 'default' },
        function(data) {
            for (var key in  data) {
            document.getElementById(key).value = data[key] }
            },
            'json');
    // prevents link click default behaviour
    return false;
  });
});

作为旁注,我总是遇到网络开发的问题,因为我不知道如何正确调试我正在做的事情。如果有人对用于调试Web代码的一些有用的技巧/工具有任何提示,我也非常乐意在此处获得一些意见。

感谢您的时间。

2 个答案:

答案 0 :(得分:0)

对于ajax代码请求,请使用:

$("#InsertDefault").click(function(){
  $.ajax({
    type: "POST",
    url: "backend.phps",
    data: "act=default&name=test&phone=test", //Something like this
    success: funtion(msg){
      console.log(msg);
    },
    beforeSend:function(dd){
      console.log(dd)
    }
  });
});

并在您的backend.php文件中

if ($_REQUEST['act'] == 'default'){
   //echo $_REQUEST['name'];
}

对于简单的调试,使用浏览器&#39;控制台,右键单击页面,然后单击检查元素。 (简单) 您还可以在Mozilla Firefox上安装 Firebug 扩展程序,然后右键单击该页面并单击使用firebug检查元素。在此之后点击控制台标签。

这些是简单的ajax请求的基本和简单的调试。

答案 1 :(得分:0)

根据最新的Ajax文档,您的ajax应该包含Success和Failure回调,您可以在其中处理从PHP发送的响应。

这应该适用于您现有的PHP文件。

的Ajax

callMyMethodOnAllObjecs