Как мне превратить это в функцию AJAX

Question

На данный момент у меня есть кнопка формы, которая при нажатии перезагружает страницу и публикует данные, которые затем запускает команду mySQL, это работает, но мне нужно показать данные сразу, а не обновлять снова, я могу перезагрузить страницу послезапрос, но это истощает мои ресурсы.Я пытался читать по AJAX, но я не могу понять (или заставить его работать !!)

Кто-нибудь может показать мне, как это сделать?Мой текущий код ...

    elseif(isset($_POST['int1'])) {
        $interest = $_POST['int1']; 
        $qResult= mysql_query("DELETE from user_interests WHERE interest = '" . mysql_real_escape_string($interest) . "' and user_id = " . $usersClass->userID());
        if(! $qResult )
            {
              die('Could not delete data: ' . mysql_error());
            }    
    }
    if($interest1 != ''){
        print $interest1 . "<form method='post' action='#'><input type='hidden' value='".$interest1."' name='int1' id='int1'/><input type='submit' value='delete' /></form><br />";
    }

Answer 1

Я бы предложил использовать jQuery , если вы только переходите на AJAX - это заставит все работать кросс-браузерно для вас.

$('#id_of_your_submit_button').click(function(e){
    $.ajax({
       type: "GET",
       url: "where_you_put_your_php.php",
       data: "some_info=" + $('#your_input_or_whatever'),
       success: function(msg){
             $('#id_of_where_you_want_info_to_go').html(msg);
       }
    });
    e.preventDefault(); // Tell submit button not refresh page
});

Затем информация о вашей форме (данные) будет находиться в переменной с именем $_GET['some_info'] в файле, в который вы поместили свой PHP. echo то, что вы хотите вернуть в документ, и появится в идентификаторе того, куда вы хотите получить информацию (см. имена вкод.)

Answer 2

Прежде всего, используйте библиотеку jQuery http://www.jquery.com! Это значительно упрощает работу с JavaScript. Тогда дайте

<input type='submit' value='delete' id="delete_button" />

Ссылка на библиотеку jQuery (лучше всего разместить ее в самом низу вашего HTML, прямо над тегом)

Затем добавьте фрагмент кода jQuery, как этот (вам, вероятно, придется изменить его в соответствии с вашими потребностями, но я попытался подобраться довольно близко)

<script type="text/javascript">

$(document).ready(function() { // this only happens when DOM is fully loaded

    $('#delete_button').click(function(e){

        var int1Val = $('#int1').val();

        $.post("your_page.php",
            { int1: int1Val, maybeSomeOtherVar: "coolbeans value" },
            function(data) { // if your_page.php sends any response back, then this function gets called
            alert("Data loaded from server POST: " + data);
        });

        $('#someMessageDivID').text(int1Val); // to immediately display the form value somewhere

        e.preventDefault(); // I'm not sure if you need this if you also have return false below, but I always put both just to make sure the form doesn't submit on its own, because we have already done it above
        return false;

    });

});

</script>

С помощью AJAX вы можете создавать по-настоящему шикарные веб-страницы для рабочего стола, так что получайте удовольствие, узнав об этом. Надеюсь, это поможет!

Answer 3

Во-первых: прочтите о том, как внедрить jQuery в вашу веб-страницу.

Затем вы можете использовать инфраструктуру jQuery для обработки вашего ajax-запроса.

Сначала создайте блок кода, подобный этому:

<?php
if(isset($_POST['ajax'])){
    //Your code goes here
}
?>

Оттуда создайте функцию Ajax:

$('#submit_button_id').click(function(){
    jQuery.post('/webpage.php',{
        'ajax' : true
    },function(data){
        //Stuff for your page to do when your page call loads.
    },'html'
});

jQuery имеет много документации на своем веб-сайте, поэтому вы должны легко понять, как ее использовать.

Answer 4

Попробуйте пролистать эту страницу http://roshanbh.com.np/2008/04/ajax-login-validation-php-jquery.html ... я думаю, что это именно то, что вам нужно сейчас.Если у вас есть путаница, не стесняйтесь ответить здесь.