从ajax传递数据时防止页面完全刷新

Question

我正在尝试在头 php 文件上提交简单的表单并访问它的值以在我的一个视图中更改页面的内容。我能够传递 ajax 值，但是当我这样做时，完整的标题页面会再次重新加载。请帮助我如何防止页面重新加载。

这是我在头文件中的表单

<form  class="choose-form form-holder" >
                                <select id="usertype" onChange="selectChange()">
                                    <option value=1>JS</option>
                                    <option value=2>JP</option>
                                </select>
</form>

这是我在 php 头文件中提交表单的脚本

<script>
function selectChange() {
            debugger;
            var usertype = $('#usertype').val();
                $.ajax({
                    type: 'GET',
                    data: {usertype: usertype},
                    success: function (response) {                  
                        $('#response').html(response);
                    },
                    error: function () {
                        alert("error");
                    }
                });
                return false;
        }
</script>

这是我在 php 视图页面中访问类型和更改内容的代码

<div id="response">
        <?php if(!empty($_GET['usertype'])){
            $type = $_GET['usertype'];

        }
?></div>

<?php if ((isset($type)) && ($type == 2)){?>
            //some other content
<?php }else{  ?>
    //change the content
<?php } ?>

Answer 1

试试下面：

<script>
function selectChange(event) {
    event.preventDefault();
    debugger;
    var usertype = $('#usertype').val();
    $.ajax({
        type: 'GET',
        data: {usertype: usertype},
        success: function (response) {
            $('#response').html(response);
        },
        error: function () {
            alert("error");
        }
    });
    return false;
}