开发者

Ajax with jQuery

开发者 https://www.devze.com 2023-01-17 16:30 出处:网络
I\'m very new to jQuery and AJAX. i read a bit of the API provided by jquery on their website which said :

I'm very new to jQuery and AJAX.

i read a bit of the API provided by jquery on their website which said :

Example: Alert out the results from requesting test.php (HTML or XML, depending on what was returned).

$.post("test.php", function(data){
   alert("Data Loaded: " + data);
 });

Now,i'd like to know how exactly test.php returns some data . I mean,could someone provide a sample "test.ph开发者_StackOverflow社区p" here

Thanks! :D


You could just return a simple string. Whatever the output is of the URL parameter will be captured by the particular ajax method you are using:

<?php echo 'this is a test'; ?>

If you want to return a more complex structure (such as json) you could do:

<?php 

$data = array('foo' => 'bar');
echo json_encode($data);

?>

and on the client:

$.post("test.php", function(json){
   alert("Data Loaded: " + json.foo);
}, "json");


test.php could look like this:

<tag>Data!!!</tag>

No <?php tags necessary.

If you're using JSON (which is a good choice for a lot of things) you can create a PHP object or array and then do:

<?php echo json_encode($my_object); ?>


<?php echo 'return data'; ?>

What happens is that the browser will make a request to the given URL, much like any other web request, with the exception that the browser doesn't render the result; it hands it to you so that you may do with it what you wish.

For returning complex php-objects as JSON objects, for your javascript to interact with, check out json_encode()


Lets say if you have some code in test.php

<?php
 echo "test data from test.php"
?>

The message is passed to data variable of javascript and will be alerted finally.

Some useful links

  • http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
  • http://www.ibm.com/developerworks/library/x-ajaxjquery.html

Here is example and simple application

index.php

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title><!-- Insert your title here --></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

    function register(){
        $.ajax({
            type: "POST",
            url: "submit_data.php",
            data:   "username=" + document.getElementById("username").value + 
                    "&email=" + document.getElementById("email").value,
            success: function(html){
                $("#response").html(html);
            }
        });

        }

    </script>
</head>
<body>
    <form action="" method="post">
          <p>
            <label for="name">Name:</label><br />
            <input type="text" name="username" id="name" size="25" />
          </p>
          <p>
            <label for="email">Email:</label><br />
            <input type="text" name="email" id="email" size="25" />
          </p>
          <p>
            <input type="button" name="submit" id="submit" value="Subscribe" onclick="register()"/>
          </p>

    </form>
    <div id="response">
        <!-- Our message will be echoed out here -->
    </div>
</body>
</html>

submit_data.php

<?php 

        // Variables 

                $db_host = 'localhost'; 
                $db_user = 'user'; 
                $db_pass = 'pass'; 
                $db_name = 'db'; 

        $Username = $_POST['username']; 
        $Email    = $_POST['email'];     

        // DB 

        $connect = mysql_connect( $db_host, $db_user, $db_pass ) or die( mysql_error() ); 
        $connection = $connect; 

        mysql_select_db( $db_name, $connect ) or die( mysql_error() ); 

        // Inserting into DB 

        $qInsertUser = mysql_query(" INSERT INTO `database` (`id`, `username`, `email`) 
                                     VALUES ( ``, `$Username`, `$Email`) 
                                  "); 

        if ($qInsertUser){ 
            echo "You are now subscribed to our newsletter. Thank you!"; 
        } else { 
            echo "Error!"; 
        } 

    ?>
0

精彩评论

暂无评论...
验证码 换一张
取 消