Question

好的，请原谅这个戏剧性的标题，但是到目前为止，在我的编码过程中，制作AJAX电话必须是最让我困惑的事情。

我正在完成一个项目，用户在搜索栏中输入关键字，并使用Wikipedia API返回结果。我已经看了几个关于制作AJAX调用的教程并查看了文档，但它没有点击。

在试图解决这个问题时，我脑子里想到的主要问题是：

什么应该进入AJAX调用，我怎么知道？我已经阅读了文档，并且知道在AJAX调用中可以指定许多设置，但是如何确定我需要使用哪些设置？这些设置意味着什么？！

我知道这对大多数人来说可能是一个愚蠢的问题，但我刚开始想要学习！

老实说，这是我所拥有的，现在明白了：

$(function() {

  // make ajax request
  $.ajax({
    url: "https://en.wikipedia.org/w/api.php", // this is the API endpoint
    dataType: json;
  });

});

Answer 1

这里很难回答这个问题并写下AJAX的所有配置的使用。我建议你一般了解HTTP Request。它的工作原理以及所有标题及其用途。在HTTP requests和AJAX上有一个很好的教程。请查看https://code.tutsplus.com/tutorials/a-beginners-guide-to-http-and-rest--net-1634。继续使用和探索AJAX来电。你会随着时间学习它。

Answer 2

好的，我不是＆＃34; Ajax大师＆＃34;但这里有一个如何使用它的例子，我希望它能帮助你。

想象一下，您在HTML中有一个简单的登录表单：

<form method="POST" name="connexion" id="connexion">
  <input type='text' id='add_url' name="add_url" required/>
  <label for="add_url">Add URL</label>
  <input type="submit" name="sub_add" value="Add">
</form>

现在我有一个a.js文件，我想检查增值是否合适，我想显示结果，如果没关系，但我不想重新加载我的页面。所以我将进行Ajax调用：

function add_url () {
  var data = $('input[name = "add_url"]').val(); // Here I select my input "add_url" and put the value on my var "data"

  $.ajax({
    type: "POST",          // How I want to send my data on my php page
    url: "mypage.php"      // the name of the file where I will use this data
    data: {"add" : data},  // The data I will use in my php, with the name "add"
    dataType: "json",      // The type of data I want to receive
    success: function(response) {

    // If my ajax call worked, I will do some code here

    },
    error: function (xhr, status, msg) {

   // If my ajax call failed, I want to know why so I will use "xhr, status and msg" to have some information about why it failed

    }
  });
}

现在在我的php中，我将使用带有ajax的数据发送并构建一个JSON响应：

// mypage.php
<?php
$url = $_POST['add']; // I put the data send in my var $url

// you do some code here with your data, for example I add the new URL in some array and the new array is $data

$result['status'] = "success";      // All is ok so I say it
$result['message'] = "All is ok !"  // I add some message
$result['data'] = $data;            // The data I will use in my JS

$result = json_encode($result);     // I need a JSON as response, remember?

echo $result;                       // My response

?>

现在在我的ajax功能中，如果一切正常，我可以使用我在成功部分发送的内容：

 success: function(response) {

    if (response.status === "success") {   // I test if the status I send is "success"
      alert(response.message);             // The message I send
      console.log(response.data);          // I want to see in my console the data I receive
    }

 }

这只是一个例子，但我希望你能更好地了解如何使用它：）

Answer 3

什么是AJAX请求？

Ajax是一组使用许多Web的Web开发技术   在客户端创建异步Web的技术   应用

使用Ajax，Web应用程序可以向其发送数据和从中检索数据   服务器异步（在后台）不干扰   显示和现有页面的行为。

考虑AJAX请求的方式与您对HTTP请求的考虑方式相同。您只需要请求服务器上的文件，文本或任何其他资源。

我为什么要使用AJAX请求？

它们为用户体验，功能和性能带来了好处。

例如，假设您正在尝试构建文本消息传递应用程序。要构建这样的东西，您需要在页面上显示新的文本消息，而无需用户执行某些操作。这称为：动态加载的内容。

这可以通过AJAX实现。

如何发出AJAX请求？

通过使用jQuery这个Javascript框架，我们可以让您的体验更轻松。以下是AJAX的基本jQuery AJAX请求。

$.ajax({ *properties* });

AJAX方法需要一些属性：

网址：您要从中提取信息的来源。
方法：您要使用的请求方法。（POST，GET，PULL）
数据：您希望发送给来源的数据。

还有更多，但为了简单起见，我只会说出那些名字。

假设您要创建一个没有页面刷新的登录系统。这真的很简单！

首先，我们需要设置后端。

if (isset($_POST['username']) && isset($_POST['password'])) {

    $username = $_POST['username'];
    $password = $_POST['password'];

    if ($username == 'USER' && $password == 'PASS') {
        echo('success');
    } else {
        echo('failure');
    }
}

将其保存在名为login.php的文件中。

第二次，让我们设置前端。

<form method="POST" action="login.php">
    <input name="username" type="text" placeholder="Username">
    <input name="password" type="password" placeholder="Password">
</form>

我们现在有ÀJAX请求的基础。在实现它之前，让我们来谈谈PHP和HTML正在做什么。

HTML有一个表单，有两个输入，用户名和密码。我们可以从属性中看到，表单会使用login.php方法将数据发送到POST。 PHP将检查它们是否已设置，以及它们是否正确。

不幸的是，此设置会导致最讨厌的网站功能之一。 THE REFRESH 。

我们如何解决这个问题？ AJAX宝贝！

首先，删除表单上的属性。

<form>
    <input name="username" type="text" placeholder="Username">
    <input name="password" type="password" placeholder="Password">
</form>

第二次，添加一个submit事件监听器。

$('form').submit(function(event) {


});

第三次，在活动中添加preventDefault()以停止刷新页面。

$('form').submit(function(event) {

    event.preventDefault();

});

第四，获取表单值。

$('form').submit(function(event) {

    event.preventDefault();

    var $form = $(this);
    var username = $form.find('input[name="username"]').val();
    var password = $form.find('input[name="password"]').val();
});

第五次，添加AJAX。

$('form').submit(function(event) {

    event.preventDefault();

    var $form = $(this);
    var username = $form.find('input[name="username"]').val();
    var password = $form.find('input[name="password"]').val();

    $.ajax({
        url: 'login.php',
        method: 'post',
        data: { username: username, password: password },
        success: function(response) {
            alert(response);
        }
    });

});

这会在表单提交时将数据发送到login.php文件。如果设置了值，PHP将回显（或将数据提供给AJAX）状态。它将返回success或failure，具体取决于用户名和密码的准确性。

希望这有帮助！这花了很长时间。

Answer 4

这个问题已经结束，所以我希望其他新手能够学习ajax 并且不寻找jQuery解决方案将从这个页面获得一些想法。

Asynchronous Javascript And XML (AJAX)是在不停止整个代码执行的情况下运行的（简而言之，AJAX是异步的）。

在普通的JavaScript中，代码是同步执行的。这意味着在执行代码之前，不能执行一个代码。

然而，在AJAX中，即使ajax代码还没有完成执行，ajax代码之后的代码仍然执行。

jQuery＆＃39; $.ajax方法基本上是以下过度简化的JavaScript：

function ajax(settings){
    var ajax = new XMLHttpRequest(),     // initializing AJAX constructor
        header = 'application/x-www-form-urlencoded';
    ajax.addEventListener('readystatechange', function(e){
        if (this.readyState == 4){       // if request is ready
            if (this.status == 200)      // if request is successful
                settings.success(this);  // run `success` function
            else                         // if request is unsuccessful
                settings.fail(this);     // run `fail` function
        }
    });
    if (settings.dataType === 'json') header = 'application/json';
    ajax.open(settings.type, settings.url, settings.async);  // opens connection with the server
    ajax.setRequestHeader('Content-Type', header);           // sets ajax request header
    ajax.send(settings.data);                                // sends data to server
}

ajax({
    type: 'POST',
    url: 'api.php',
    dataType: 'json',
    data: {},
    async: true,
    success: function(e){
        alert('Ajax successful');
    },
    fail: function(e){
        alert('Ajax failed');
    }
});

上面的代码解释了AJAX是什么。下面的代码解释了异步意味着什么。

如果ajax设置为同步：

var a = 0;

a += 1;

ajax({
    type: 'POST',
    url: 'api.php',
    dataType: 'json',
    data: {},
    async: false,          // async is set to false
    success: function(e){
        a += 10;
        console.log(a);
    },
    fail: function(e){
        alert('Ajax failed');
    }
});

a += 2;

console.log(a);

几秒钟后（因为等待服务器的响应），控制台将在控制台中记录两个13。这是因为a += 2只会在ajax()执行结束后执行。

但是，如果ajax设置为异步：

var a = 0;

a += 1;

ajax({
    type: 'POST',
    url: 'api.php',
    dataType: 'json',
    data: {},
    async: true,           // async is set to true
    success: function(e){
        a += 10;
        console.log(a);
    },
    fail: function(e){
        alert('Ajax failed');
    }
});

a += 2;

console.log(a);

控制台将立即首先记录3，然后在几秒后记录13。这是因为当ajax()正在等待服务器的响应时，a += 2和后面的代码仍在执行，即使ajax()仍在执行（等待服务器的响应）。一旦服务器响应，它将只执行a += 10和另一个console.log(a)。

当然，要制作有意义的ajax请求，您需要在服务器端使用一些代码。

假设我们有来自api.php的假api：

if (isset($_POST['hello']) && isset($_POST['foo'])){
    $array = [
        'one' => $_POST['hello'],
        'two' => $_POST['foo'];
    ];
}
echo json_encode($array);

然后在JavaScript中：

ajax({
    type: 'POST',
    data: {
        hello: 'world',
        foo: 'bar',
    },
    success: function(response){
        console.log(response);
    },
});

控制台将记录类似于以下内容的内容：

{
    'one': 'world',
    'two': 'bar',
}

我无法理解AJAX对我生活的要求

4 个答案:

什么是AJAX请求？

我为什么要使用AJAX请求？

如何发出AJAX请求？