Javascript 如何使php文件能够用于Ajax

我正在使用CodeIgniter，我对AJAX有一些问题，老实说，这是我第一次使用它。因此，一些问题越来越多

我需要的是：

我需要使用AJAX和获取id的帖子

内容：

    <div class="the-game" id="3">
    <div class="center">
    <input type="text" id="team_1" class="field">
    <span> X </span>
    <input type="text" id="team_2" class="field">
    </div>
    <input type="text" style="display:block;" maxlength="2" class="multi" value="1" id="number_times">
    <a href="#" class="action">GO</a>

<a href="#" id="show_guesses">show guesses</a>
<div class="guesses">

THIS DIV RECEIVE GUESSES WHEN PAGE LOAD, USING PHP.
<ul>
<li>

    <input type="text" id="team_1" class="field" value="2">
    <span> X </span>
    <input type="text" id="team_2" class="field" value="3">
    </div>
</li>
</ul>
</div>
    </div>

<!-- OTHER GAME -->

    <div class="the-game" id="4">
    <div class="center">
    <input type="text" id="team_1" class="field">
    <span> X </span>
    <input type="text" id="team_2" class="field">
    </div>
    <input type="text" style="display:block;" maxlength="2" class="multi" value="1" id="number_times">
    <a href="#" class="action">GO</a>
<a href="#" id="show_guesses">show guesses</a>
<div class="guesses">

THIS DIV RECEIVE GUESSES WHEN PAGE LOAD, USING PHP.
<ul>
<li>

    <input type="text" id="team_1" class="field" value="2">
    <span> X </span>
    <input type="text" id="team_2" class="field" value="3">
    </div>
</li>
</ul>
</div>
    </div>

所以我需要一个帖子：

$id_game, $team_1, $team_2

按

a class=“action”

使用Ajax进入

/salve\u guess

我现在的javascript：

$(document).ready(function() {



$('.guesses').hide();
$( "#the-game input" ).click(function() {
var id = ($(this).parent().parent().parent().parent().attr("id"));

$(this).parent().parent().parent().next('.guesses').slideToggle(360, 'swing');


});
$( "a#show_guesses" ).click(function() {
$(this).parent().parent().next('.guesses').slideToggle(360, 'swing');
});
});

现在关键部分是：

我想知道如何使PHP在失败或成功时返回，并将其发送到AJAX，AJAX将其显示给调用警报或弹出窗口的用户。我可以使用任何函数查看由PHP文件编写的HTML的内容吗？对我来说，最困难的部分是，它可以做一次以上，比如每一个动作20次（在PHP中，每个动作对应一次）

我希望在页面中显示这个新的猜测，而不重新加载它（请记住，我已经在使用PHP显示猜测，所以我只需要插入这个名为

a=“action”的新猜测

并在这个div的顶部插入

class=guesss

并需要使用id，这样PHP就可以编写一个id列表，jQuery就可以从PHP文件中获取并使用这个id重新编写HTML了

对不起，时间太长了，但我在这一点上卡住了

希望你们能理解

---

您诚挚的。

据我了解：）： 假设您有这个标记（我对您的标记感到困惑，请告诉我这是否是错误的）：

在控制器中，您会收到如下post数据（我的做法）：

---

注意：

你能把你的javascript放在上面吗？你需要阅读一些ajax教程或者搜索一些other@Vainglory07atm是一个简单的javascript，只是用来显示和获取id，我想有人告诉我怎么做。只是澄清一下，你想获取

#team_1

的输入值，

#team_2

当按下

GO

时，将其作为

$team_1=#team_1

和

$team_2=#team_2

传递到CI控制器中，并将该控制器返回到您的javascript？@Vainglory07正是我所需要的，但它可以执行不止一次，因为#次数#表示我需要执行多少次，对每一个都一样，然后它另存为猜测。好吧，这是对的，现在，我该如何告诉ajax编写这个由controller完成的操作，我的javascript从salve_guess controller获取id并放入

，因为我计划在不刷新页面的情况下编辑猜测，所以我需要id，并且id是从控制器自动递增生成的，我可以在控制器和javascript中打印id数组和其他值吗？谢谢你的帮助。你的控制器将只返回ID吗？不，它返回team_1和team_2的输入值以及ID_游戏谢谢，你救了我的皮肤！

$(document).ready(function() {



$('.guesses').hide();
$( "#the-game input" ).click(function() {
var id = ($(this).parent().parent().parent().parent().attr("id"));

$(this).parent().parent().parent().next('.guesses').slideToggle(360, 'swing');


});
$( "a#show_guesses" ).click(function() {
$(this).parent().parent().next('.guesses').slideToggle(360, 'swing');
});
});

<div class="the-game" id="3">
    <div class="center">
        <input type="text" id="team_1" class="field" value="2">
        <span> X </span>
        <input type="text" id="team_2" class="field" value="3">
    </div>

    <input type="text" style="display:block;" maxlength="2" class="multi" value="1" id="number_times">
    <a href="#" class="action">GO</a>
    <a href="#" id="show_guesses">Show Guesses</a>
</div>
<div id="output"></div>

<script>
    $(document).ready(function() {
        $('.action').on('click', function () {
            // Get game ID
            var get_id_game = $(this).parent('.the-game').attr('id');
            // Get team 1
            var get_team_1 = $('#team_1').val();
            // Get team 2
            var get_team_2 = $('#team_1').val();
            // Get loop count
            var get_multi = $('#number_times').val();

            $.post(
                'http://localhost/helpers/jquery/salve_guess.php', {
                    id_game: get_id_game,
                    team_1: get_team_1,
                    team_2: get_team_2,
                    multi: get_multi
                }, function (data) {
                    // data arg here will contain the output of your controller
                    // convert json string to json obj
                    var json = JSON.parse(data);
                    var markup;
                    $.each(json, function (index, value) {

                        markup = [
                            '<div class="guesses">',
                                '<ul>',
                                    '<li class="guess" id="' + index + '">',
                                    value.id_game + '-' + value.team_1 + '-' + value.team_2,
                                    '</li>',
                                '</ul>',
                            '</div>',
                        ];

                        $('#output').append(markup.join('\n'));
                    });
                }
            );
        });
    });
</script>

public function salve_guess() {
    $id_game = $this->input->post('id_game', TRUE);
    $team_1 = $this->input->post('team_1', TRUE);
    $team_2 = $this->input->post('team_2', TRUE);

    $json_arr = array(
        // incrementing ID => array(id_game, team_1, team_2)
        1 => array(
            'id_game' => 1, 
            'team_1' => 2, 
            'team_2' => 3
        ),
        2 => array(
            'id_game' => 1, 
            'team_1' => 2, 
            'team_2' => 3
        )
    );

    echo json_encode($json_arr);
}