无法使AJAX和PHP工作

Question

所以这是场景：

我有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开发方面的问题，因为我不知道如何正确调试正在做的事情。 如果有人对调试Web代码有什么有用的技巧/工具有任何提示，我也很乐意对此有所投入。

谢谢你的时间。

Answer 1

对于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'];
}

为了进行简单的调试，请使用浏览器的控制台，右键单击页面，然后单击检查元素 。 （简单）您也可以在Mozilla Firefox上安装Firebug扩展，然后右键单击该页面，然后单击inspect带Firebug的元素 。 之后，单击那里的“ 控制台”选项卡。

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

Answer 2

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

这应该与您现有的PHP文件一起使用。

阿贾克斯

  $(document).ready(function () {
   //look for some kind of click below
            $(document).on('click', '#InsertDefault', function (event) {

            $.ajax({
                url: "/backend.phps",
                type: 'POST',
                cache: false,
                data: {act: 'default'},
                dataType: 'json',
                success: function (output, text, error)
                {

     for (var key in  output.defaultData) {
    document.getElementById(key).value = data[key] 
    }
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                   //Error handling for potential issues.
                    alert(textStatus + errorThrown + jqXHR);
                }
            })
        })
preventDefault(event);
    });

无法使AJAX和PHP工作

问题描述

2 个解决方案

解决方案1
0 2016-12-08 22:49:57

解决方案2
0 2016-12-08 22:53:44

无法使AJAX和PHP工作

问题描述

2 个解决方案

解决方案1 0 2016-12-08 22:49:57

解决方案2 0 2016-12-08 22:53:44

解决方案1
0 2016-12-08 22:49:57

解决方案2
0 2016-12-08 22:53:44