Question

在这段代码中，我想使用ajax基于select标签中的选定选项加载视图文件夹（MVC项目），并且它可以正常工作。我想要的是，当我点击提交按钮时，它会通过ajax函数提醒我test.php的内容。我的问题是，当我点击提交按钮时，没有任何反应

的script.js：

$(document).ready(function () {
$('#SelectBox').on("change", function() {
    if ($('#SelectBox').val() == 'rectangle') {
        $.ajax({
            type:'post',
            url:'views/rectangle/index',
            data:{},
            success:(function (response) {
                $('#Container').html(response);
            })
        })

    }else if($('#SelectBox').val() == 'square'){
        $.ajax({
            type:'post',
            url:'views/square/index',
            data:{},
            success:(function (response) {
                $('#Container').html(response);
            })
        })
    }
})
})

script2.js：在索引页面的顶部（views / square / index），当我点击提交按钮时，我希望它使用ajax警告test.php的内容：

$(document).ready(function () {
$('#send').click(function () {
    $.ajax({
        type:'post',
        url:'views/index/test',
        data:{},
        success:(function (response) {
            alert(response);
        })
    })
})
})

这是test.php：

<?php
echo "salam";
?>

方形视图：

<script src="public/js/script2.js"></script>
<?php
$return .='<form action="" method="post">
<label for="edge">edge:</label>
<input type="text" name="edge" id="edge"/>
<input type="submit" value="SEND" id="send"/>
</form>';
echo $return;
?>

Answer 1

确保在此script.js文件之前包含jQuery库。

现在将所有代码添加到一个文件script.js中，如下所示： -

$(document).ready(function () {
    $('#SelectBox').on("change", function() {
        if ($('#SelectBox').val() == 'rectangle') {
            $.ajax({
                type:'post',
                url:'views/rectangle/index',
                data:{},
                success:(function (response) {
                    $('#Container').html(response);
                })
            })

        }else if($('#SelectBox').val() == 'square'){
            $.ajax({
                type:'post',
                url:'views/square/index',
                data:{},
                success:(function (response) {
                    $('#Container').html(response);
                });
            });
        }
    });
    $('#send').click(function (e) { //event added
        e.preventDefault(); //prevent normal for submit
        $.ajax({
            type:'post',
            url:'views/index/test',
            success:(function (response) {
                alert(response);
            });
        });
    });
});

所以你的观点代码必须是： -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="public/js/script.js"></script>
<?php
$return .='<form action="" method="post">
<label for="edge">edge:</label>
<input type="text" name="edge" id="edge"/>
<input type="submit" value="SEND" id="send"/>
</form>';
echo $return;
?>

两个ajax功能之一无法正常工作

1 个答案: