how to asynchronously get data using ajax and php

Question

i am new in ajax. i want to display the text entered inside the input to another div element.here is the image given below:

here is my code :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>

    <label for="bar">Enter Text</label>
    <input id="bar" name="bar" type="text" value="" />   


<!-- The result of the search will be rendered inside this div -->
<div id="result">Text Output: </div>

<script >
 /* Get from elements values */
 var values = $(this).serialize();

 $.ajax({
        url: "testajax.php",
        type: "post",
        async:true,
        data: values ,
        success: function (response) {                     

        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }


    });
</script>

</body>
</html>

here is php code:

<?php
  $bar = $_POST['bar']
?>

please help me to fix the problem & also minimize the code if possible.thanks

Answer 1

Client-side

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>    
</head>
<body>
<form>
    <label for="bar">Enter Text</label>
    <input id="bar" name="bar" type="text" value="" />   
    <input type="submit" value="Go">
</form>

<!-- The result of the search will be rendered inside this div -->
<div id="result">Text Output: </div>
<!-- For testing purposes comes here the JSON object (stringified) -->
<div id="jsonstring" style="font-family:monospace;">Json object</div>

<script type="text/javascript">
var values = $("form").serialize();

$("form").on("submit", function( event ) {
    event.preventDefault();
    var values = $( this ).serialize();

    $.ajax({
        url: "testajax.php",
        type: "post",
        async: true,
        data: values,
        dataType: 'json',
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        success: function(json) {
            $('#result').html((json.content) ? (json.content) : '???');
            $('#result').prop('title', json.title);
            $('#jsonstring').html('Json object: '+JSON.stringify(json));
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }
    });

});

</script>

</body>
</html>

Server-side

<?php
    $bar = (isset($_POST['bar'])) ? $_POST['bar'] : '';
    $result = array(
        'title' => 'This is the result from an AJAX call',
        'content' => 'This is the result: <span style="color:red;">' . $bar . '</span>',
    );
    echo json_encode($result);
?>

Answer 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
 <form name="form">
    <label for="bar">Enter Text</label>
    <input id="bar" name="bar" type="text" value="" />  
    <input type="submit" id="submit" value="click"  >
  </form>

 <!-- The result of the search will be rendered inside this div -->
    <div id="result">Text Output: </div>

<script >
 /* Get from elements values */
 $("#submit").on("click", function(){
 var values = $(this).serialize();

 $.ajax({
    url: "testajax.php",
    type: "post",
    async:true,
    data: values ,
    success: function (response) {                     
    $('#result').html((response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
       console.log(textStatus, errorThrown);
    }
  });

 });
</script>

</body>
</html>

how to asynchronously get data using ajax and php

Question

2 answers

solution1
2 ACCPTED 2016-01-23 13:27:07

Client-side

Server-side

solution2
2 2016-01-24 08:49:47

how to asynchronously get data using ajax and php

Question

2 answers

solution1 2 ACCPTED 2016-01-23 13:27:07

Client-side

Server-side

solution2 2 2016-01-24 08:49:47

solution1
2 ACCPTED 2016-01-23 13:27:07

solution2
2 2016-01-24 08:49:47