Question

我正在使用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>

好的，我已经使用class="the-game"函数从parent()获取了ID。现在我想了解我如何在我的php文件中发布，它已经支持

$id_game, $team_1, $team_2.

所以我需要发帖：

$id_game, $team_1, $team_2

按/salve_guess，使用Ajax

进入a class="action"。

我的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将其显示给用户调用警报或弹出窗口。我可以使用任何JavaScript函数查看PHP文件编写的HTML内容吗？对我来说最困难的部分，它可以做1次以上，比如每1次动作20次（PHP中的每次动作）。

我希望在页面中显示这个新的猜测而不重新加载它（记住我已经使用PHP显示猜测，所以我只需插入a="action"调用的这个新猜测并插入此div的顶部class=guesses并且需要使用id，所以PHP可以编写一个id列表，jQuery获取它并使用PHP文件中的这个ID重新编写HTML？

对不起，太久了，但我现在卡住了。

希望你们明白。

你真诚的。

Answer 1

根据我的理解:)：假设你有这个标记（我对你的标记感到困惑，只要告诉我这是不对的）：

<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>

其中

<div class="the-game" id="3">中的

ID 是您的id_game，

<input type="text" id="team_1" class="field" value="2">中的

值是您的team_1，

<input type="text" id="team_2" class="field" value="3">中的

值是您的team_2，

<input type="text" style="display:block;" maxlength="2" class="multi" value="1" id="number_times">中的

值是您的循环次数。

然后在javascript中获取这些：

<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);
}

注意：$this->input->post(NULL, TRUE); // returns all POST items with XSS filter

如何使php文件能够用于Ajax

1 个答案: