无法使AJAX和PHP工作

Question

So here is the scenario: 所以这是场景：

I have HTML, JS, and PHP Files. 我有HTML，JS和PHP文件。 Within the PHP File is an associative array of default values to fill out various form elements on the HTML file. PHP文件内是一组默认值的关联数组，用于填充HTML文件上的各种表单元素。 I am attempting to use AJAX to take the files from the PHP Files, and put them in the corresponding form elements. 我正在尝试使用AJAX从PHP文件中获取文件，并将其放入相应的表单元素中。 However nothing is working..... 但是什么都没有工作.....

Below is the code for the corresponding files. 以下是相应文件的代码。 Any help figuring this out is greatly appreciated :) 任何帮助弄清楚这一点非常感谢:)

HTML 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

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

As a side note, I always have trouble with web development stuff because I have no idea how to properly debug what I am doing. 附带说明一下，我总是在处理Web开发方面的问题，因为我不知道如何正确调试正在做的事情。 If anyone has any tips on what are some useful tricks/tools to use for debugging web code, I'd be more than happy to get some input on that too. 如果有人对调试Web代码有什么有用的技巧/工具有任何提示，我也很乐意对此有所投入。

Thanks for your time. 谢谢你的时间。

Answer 1

For ajax code request use: 对于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)
    }
  });
});

and in your backend.php file 并在您的backend.php文件中

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

And for simple debugging use browsers' console, right click on the page and click Inspect Element . 为了进行简单的调试，请使用浏览器的控制台，右键单击页面，然后单击检查元素 。 (Simple) You can also install Firebug extension on Mozilla Firefox and then right click on the page and click on inspect Element with firebug . （简单）您也可以在Mozilla Firefox上安装Firebug扩展，然后右键单击该页面，然后单击inspect带Firebug的元素 。 after this click on the Console tab there. 之后，单击那里的“ 控制台”选项卡。

These are the basic and simple debugging for simple ajax request. 这些是简单ajax请求的基本和简单调试。

Answer 2

Per the newest Ajax documentation your ajax should include the Success and Failure callbacks where you can handle the response being sent from your PHP. 根据最新的Ajax文档，您的ajax应该包括Success和Failure回调，您可以在其中处理从PHP发送来的响应。

This should work with you existing PHP file. 这应该与您现有的PHP文件一起使用。

Ajax 阿贾克斯

  $(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