Question

我正在尝试从PHP文件调用数据，在该文件中输入数据并告知它是否已经过验证。你如何使用AJAX调用在javascript文件中执行此操作？

$("#PersonForm").submit(function()
{
    $.ajax({
        url: 'backend.php', type: 'post', data: { act:'validate'},
        dataType: 'json',
       function(result) {
            if($validateData==1){
                $('#success').html('validated');
            }
            else{
                $('#errors').html('Not Correct');
            }
        }

        //});

    });
    return false;

 });

这是PHP文件

<?php
if ($_REQUEST['act'] == 'validate')
{
  $validateData = array();

  if (preg_match("/^[A-Za-z]{3,20}$/",$_REQUEST['name'])) $validateData['name'] = 1;
  else $validateData['name'] = 0;

  if (preg_match("/^[0-9]{10}$/",$_REQUEST['phone'])) $validateData['phone'] = 1;
  else $validateData['phone'] = 0;

  if (preg_match("/^[A-Z][0-9][A-Z][0-9][A-Z][0-9]$/",
                              $_REQUEST['postal'])) $validateData['postal'] = 1;
  else $validateData['postal'] = 0;

  if (preg_match("/^[0-9]{3} [A-Za-z]{3,10} Street$/",
                              $_REQUEST['address'])) $validateData['address'] = 1;
  else $validateData['address'] = 0;

  echo json_encode($validateData);
}
else echo "Should not happen";

?>

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 id="sub" 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>

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

Answer 1

您应该使用成功和错误回调，以便等待来自ajax调用的承诺返回。我假设你正试图弄清楚如何获得回来的数据。如果您需要进一步的帮助然后验证真实数据，我也可以帮助解决这个问题。

$.ajax({
    url: 'backend.php', type: 'post', data: { act:'validate'},
    dataType: 'json',
    success: function (data) {
        if($validateData==1){
            $('#success').html('validated');
        }
        else{
            $('#errors').html('Not Correct');
        }
    },
    error: function (request, status, error) {
        // Error occurred calling API
    }
});

Answer 2

首先，您未发送data:参数中的任何输入。因此$_REQUEST['name']，$_REQUEST['phone']等不存在。

其次，您无法在Javascript中访问PHP变量。 PHP最终回应的JSON将被解码为result回调函数中的success:变量。

第三，你的语法错误，回调函数需要在success:选项中。

所以它应该是：

$("#PersonForm").submit(function()
{
    $.ajax({
        url: 'backend.php', 
        type: 'post', 
        data: 'act=validate&' + $(this).serialize(),
        dataType: 'json',
        success: function(result) {
            if(result.name && result.phone && result.post && result.address){
                $('#success').html('validated');
            }
            else{
                $('#errors').html('Not Correct');
            }
        }    
    });
    return false;
 });

如何在AJAX调用中验证数据

2 个答案: