Ajax to PHP on the same page

后端未结

关注

 2  1899

深忆病人

I’m trying to send variables to the same page that makes the AJAX call.

I receive successful result only if I separate the PHP script (e.g. process.php

相关标签:

2条回答

悲&欢浪女

2020-12-11 06:59

add die(); function AND use $_SERVER['HTTP_X_REQUESTED_WITH'] which detect ajax request. alos put serialize() out side of ajax function to get data

   var data = '';
   $(function() { 
    $('form').submit(function(e) { 
        e.preventDefault();
        data = $(this).serialize();
        $.ajax({
            type        : 'POST',
            url         : 'index.php',
            data        :  data,
            dataType    : 'json',
            encode      : true
        })
        .done(function(data) {
            $('#result').html(data);    
        })
    });
}); 


<?php

  $data = array();
  if(isset($_POST['name']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH'])) {
    $data = 'You entered: ' . $_POST['name'];       
    echo json_encode($data);  
    die();      
  }
?>

0 讨论(0)

栀梦

2020-12-11 07:13

You set dataType : json in AJAX settings, so that you should echo a json object instead of a String (HTML).
Use exit() instead of echo, and put your PHP at the very top of the page. So that no HTML is echoed before you check if $_POST['name'] exists.

Another thing is that your $data = array() is converted to string on that line:

$data = 'You entered:' . $_POST['name'];

it should be $data[] = ...

<?php
    $data = array();
    if(isset($_POST['name'])) {
        $data[] = 'You entered:' . $_POST['name'];
        exit(json_encode($data));       
    }
?>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(function() { 
        $('form').submit(function(e) { 
            e.preventDefault();
            $.ajax({
                type        : 'POST',
                url         : 'index.php',
                data        : $(this).serialize(),
                dataType    : 'json',
                encode      : true
            })
            .done(function(data) {
                $('#result').html(data);    
            })
        });
    }); 
</script>
</head>

<body>
    <form>
        <input type="text" name="name">
        <input type="submit" value="Submit">
    </form>
    <div id="result"></div>
</body>

0 讨论(0)