Javaweb实训项目中使用到的ajax

最新推荐文章于 2020-12-24 13:48:07 发布

原创最新推荐文章于 2020-12-24 13:48:07 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #java web

Javaweb 专栏收录该内容

1 篇文章

订阅专栏

本文记录了在JavaWeb实训项目中使用AJAX的实践，包括实现下拉框联动、账户检查以及判断数据库中外键关联的情况。在解决这些问题时，作者经历了多次尝试并最终调试成功。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.下拉框

function addRoles() {
        $.ajax({
            url : "json/role_listAll", //后台webservice里的方法名称 
            type : "post",
            dataType : "json",
            contentType : "application/json",
            traditional : true,
            success : function(data) {
                var optionstring = "";
                for ( var i in data) {

                    //alert(data[i].desc);
                    optionstring += "<option value=\"" + data[i].id + "\" >"
                            + data[i].desc + "</option>";
                    $("#role")
                            .html(
                                    "<option value='0'>请选择...</option> "
                                            + optionstring);
                }
            },
            error : function(msg) {
                alert("出错了！");
            }
        });
    };

对应的HTML

<td>
<select id="role" name="u.role_id"></select>
</td>

2.检查账户


function checkAccount() {

        $.ajax({
            type : "POST",
            //使用struts2+struts2-json-plugin-2.2.1.jar的,这些都不用设置  

            url : "json/user_checkAccount",
            data : {
                "u.account" : $("#uaccount").val()
            },
            success : function(data) {
                //alert(data);
                $("#msg").html(data);
            }
        });
    }

3.判断有没有下属或员工（数据库中的表中有外键的）
（当初百度了好多答案）最后终于调试成功，毕竟第一次使用ajax。

<script type="text/javascript">
    function ifStaff(id) {     
       var result = false;//不能直接在里面return真假
        $.ajax({
            async:false,//同步
            type : "POST", 
            url : "json/user_ifStaff?id="+id,
            success : function(data) {

                if(data>0) { //后台查询有没有
                //alert(data);
                result=false;}
                else {result=true;}
            }
        }); 
        return result;
    }
    function hasTask(id) { 
       var result = false;
        $.ajax({
            async:false,
            type : "POST", 
            url : "json/user_hasTask?id="+id,
            success : function(data) {

                if(data>0) { 
                //alert(data);
                result=false;}
                else {result=true;}
            }
        }); 
        return result;
    }
</script>
<script type="text/javascript">
//从jsp页面中拿到id
function del(id){
    if(ifStaff(id)&&hasTask(id)){
        if(confirm("确认删除？")){   
            location.href="user_Delete?id="+id;
            }
        }
    else{
        alert("不能删除！有下属或者有任务");
        }        
}
</script>

Struts中配置

<package name="json" namespace="/json" extends="json-default">
        <action name="user_*" class="edu.tjpu.task.action.UserAction"
            method="{1}">
            <result type="json">
                <param name="noCache">true</param>
                <param name="contentType">text/html</param>
                <param name="root">mlist</param>
            </result>
            <result type="json" name="addStaff">
                <param name="noCache">true</param>
                <param name="root">slist</param>
            </result>
            <result type="json" name="check">
                <param name="noCache">true</param>
                <param name="root">msg</param>
            </result>
            <result type="json" name="ifStaff">
                <param name="noCache">true</param>
                <param name="root">hasStaff</param>
            </result>
            <result type="json" name="ifTask">
                <param name="noCache">true</param>
                <param name="root">hasTask</param>
            </result>
        </action>
        <action name="role_*" class="edu.tjpu.task.action.RoleAction"
            method="{1}">
            <result type="json">
                <param name="noCache">true</param>
                <param name="contentType">text/html</param>
                <param name="root">rlist</param>
            </result>
        </action>

    </package>