php数组请求与AJAX

Question

so I'm doing a basic assignment for uni, they asked us to use ajax and php to create a text input that validates the name and email plus a live search bar, all this without using db. So I have the html already set up, the .php with 3 different arrays with names, emails and news stored in and a main.js that already displays whatever you type in the text input in the console with the keyup event trigger. I just can't figure out a way to make an ajax request to compare what you type in to the info stored in the arrays. In the arrays.php I have this :

*$classes = array('1' => 101, '2'=> 102, '3'=>103 );*

*$names = array('juan', 'tito', 'pedro', 'horacio', 'andres', 'cesar', 'nicolas');*

*$news = array('Title'=>array('El papa muere', 'Argentina gana el mundial', 'Fondos buitres cancelados' )'Noticia'=>array('noticia1', 'noticia2', 'noticia3')
                  );*

and in the main.js I have something like this:

$('#name').keyup(function(){
        var name=$(this).val();
        console.log(name);

that retrieves what I type in each text field. As far as I can remember, the prof wrote something like this to give us a hint:

$.ajax({
url: ' ',
type: ' ',
success:function(data){
}
}):

But I just can't figure it out so any help would be much appretiated!

Answer 1

The general idea is to pass the current value of the search box to your PHP script via ajax. Then in your PHP script, you would filter your options based on the current value passed to it and return a filtered response. The javascript would then take the filtered response and output it on the page.

People usually use JSON as a format for passing information between Javascript and PHP.

To give you a little better understanding what $.ajax does. It will make a request to your server and then process the results. The parameters specified do the following:

url: The URL to request
type: The format of the response (eg. text, xml, json, etc.)
success: A callback to be called when the response comes back from the response.

Also note that the A in AJAX stands for asynchronous. This is why you need to give the $.ajax function a callback. Due to the nature of HTTP, you make a request and the response can return right away or in 30 seconds or never. When the response returns the callback will execute. It is not linear. Therefore the callback can execute after code below the the $.ajax call depending on how long it takes for the response to come back.

Maybe take a look at the example below to give you a better idea of how to do this:

<?php

    $names = array('juan', 'tito', 'pedro', 'horacio', 'andres', 'cesar', 'nicolas');

    $result = array();
    foreach($names as $name) 
    {
        if (strpos($name, $_GET['name']) !== false)
        {
            $result[] = $name;
        }
    }

    echo json_encode($result);

?>

And the javascript

$('#name').keyup(function() {
    var name=$(this).val();
    $.ajax({
        url: '?name=' + name,
        type: 'json',
        success: function(data) {
            console.log(data);
            // add data to results
        }
    }):
});