蒟蒻弱 2024-07-24 08:40 采纳率: 50%
浏览 7

为什么我的ajax不起作用

为社么我的ajax没起作用?

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%String BasePath =   request.getScheme() + "://" 
                        + request.getServerName()
                        +":"
                        +request.getServerPort()
                        +request.getContextPath()
                        +"/";    
%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<base href = "<%=BasePath%>">
<meta charset="UTF-8">
<title>添加员工信息</title>
</head>
<body>
<c:if test = "${staff == null }">
<jsp:forward page = "../staff.do?action=getById"></jsp:forward>
</c:if>

<h1>修改员工信息</h1>
<form action="staff.do?action=edit" method = "post">
<input type = "hidden" name = "id" value = "${staff.id }">
姓名:<input type = "text" name = "name" value = "${staff.name }"><br>
电话:<input type = "text" name = "phone" value = "${staff.phone }"><br>
部门:<select name = "dept_id"></select><br>
领导:<select name = "leader"></select><br>
工资:<input type = "number" name = "salary" value = "${staff.salary }"><br>
<input type = "submit" value = "修改"><br>
${error }
<script type = "text/javascript" src = "js/jquery-2.1.4.js"></script>
<script type = "text/javascript">
$.ajax({
//属性,值
        url : 'dept.do?action=getAll',//请求地址
        type : 'post',//请求类型
        data : {action : 'getAll'},//请求的参数
        dataType : 'json',//返回的数据类型
        success:function(data){
            //当请求成功后,调用该函数
            //服务器处理成功,返回的数据类型与dataType指定的类型相同
            //data就是从服务器返回的数据
            //单选按钮和复选框,默认选中设置checked = "checked"
            //下拉列表项默认选中,设置selected = "selected"
            var html = "<option value = '0'>请选择部门</option>";
            $.each(data , function(index , item){
                if(item.id == ${staff.dept_id}){
                    html += "<option value ='"+item.id+"' selected = 'selected'>"+item.name+"</option>";
                }else{
                    html += "<option value ='"+item.id+"'>"+item.name+"</option>";
                }
            });
            $("select[name = 'dept_id']").html(html);
            
            var dept_id = ${staff.dept_id};
            $.ajax({
                url : 'staff.do?action=getByDeptId',
                type : 'post',
                data :{action:'getByDeptId' , dept_id : dept_id} ,
                dataType :'json' ,
                success:function(data){
                var html = "<option value = '0'>请选择领导</option>";
                $.each(data , function(index , item){
                    if(${staff.id} == item.id ){
                        
                    }else if(item.id == ${staff.leader != null ? staff.leader : 0}){
                        html += "<option value = '"+item.id+"' selected = 'selected'>"+item.name+"</option>";
                    }else{
                        html += "<option value = '"+item.id+"'>"+item.name+"</option>";
                    }
                    
                })
                    $("select[name = 'leader']").html(html);
                },
                error:function(){
                    alert("请求失败");    
                }
        });
        },
        error:function(){
            //请求失败时,回调该函数
            alert("请求失败");
        }
});
//绑定一个事件
$("select[name = 'dept_id']").change(function(){
    //alert("你变了");
    var dept_id = $(this).val();
    //alert(dept_id);
    //获取这个部门的所有员工
    if(dept_id > 0){
    $.ajax({
                url : 'staff.do?action=getByDeptId',
                type : 'post',
                data :{action:'getByDeptId' , dept_id : dept_id} ,
                dataType :'json' ,
                success:function(data){
                var html = "<option value = '0'>请选择领导</option>";
                $.each(data , function(index , item){
                    if(${staff.id} != item.id){
                        html += "<option value = '"+item.id+"'>"+item.name+"</option>";
                    }
                })
                    $("select[name = 'leader']").html(html);
                },
                error:function(){
                    
                }
        });
    }else{
        $("select[name = 'leader']").html("");
        
    }
});
</body>
</html>


img


为社么我的ajax没起作用?

img

  • 写回答

3条回答 默认 最新

  • 阿里嘎多学长 2024-07-24 08:40
    关注

    以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳:


    根据您提供的代码和描述,您的AJAX请求可能存在以下几个问题,以下是一些可能的原因和解决方案:

    1. JQuery库未正确加载

    确保jquery-2.1.4.js文件的路径是正确的,并且该文件已经正确加载到页面中。您可以通过在浏览器的开发者工具中检查网络请求来确认这一点。

    2. 服务器端处理问题

    您的AJAX请求依赖于服务器端的dept.dostaff.do的响应。如果服务器端没有正确处理这些请求,或者返回的数据格式与预期不符,AJAX请求可能会失败。检查服务器端的日志,确保请求被正确处理。

    3. AJAX请求的URL问题

    您的AJAX请求URL可能需要根据实际的服务器环境进行调整。例如,如果dept.dostaff.do是Servlet映射,确保它们的URL映射是正确的。

    4. 数据类型不匹配

    在您的AJAX请求中,您期望服务器返回的数据类型是JSON。确保服务器端确实返回了JSON格式的数据,并且数据结构与您的处理逻辑相匹配。

    5. JSP表达式错误

    在您的代码中,使用了${staff.dept_id}${staff.leader != null ? staff.leader : 0}这样的JSP表达式。如果${staff}对象是null,这些表达式将无法正常工作。确保在执行这些表达式之前,${staff}对象已经被正确初始化。

    6. AJAX请求的type属性

    您的AJAX请求使用了type : 'post',但是没有设置contentType属性。在某些情况下,服务器可能期望特定的contentType,比如application/x-www-form-urlencoded

    7. 跨域问题

    如果您的AJAX请求是跨域的,那么您可能需要在服务器端设置CORS(跨源资源共享)策略。

    8. 浏览器缓存问题

    有时候浏览器缓存可能会导致问题,尝试清除缓存或者使用无痕模式访问页面。

    9. 错误处理

    在您的AJAX请求中,error函数只是弹出了一个警告框。这可能不足以帮助您诊断问题。您可以尝试打印出错误对象,以获取更多的错误信息。

    10. 图片内容

    您提供了两张图片,但是没有说明图片内容与问题的关系。如果图片中包含了错误信息或者与问题相关的数据,请确保这些信息被正确地处理和展示。

    解决方案

    1. 确保JQuery库正确加载: 检查jquery-2.1.4.js文件的路径是否正确,并确保其被正确加载。

    2. 检查服务器端日志: 确保服务器端正确处理了AJAX请求,并返回了正确的数据。

    3. 调整AJAX请求URL: 确保AJAX请求的URL与服务器端的URL映射一致。

    4. 检查服务器返回的数据格式: 确保服务器返回的数据格式为JSON,并且结构正确。

    5. 初始化JSP表达式: 确保在执行JSP表达式之前,${staff}对象已经被正确初始化。

    6. 设置contentType属性: 在AJAX请求中添加contentType: 'application/x-www-form-urlencoded'

    7. 配置CORS策略: 如果需要,配置服务器端的CORS策略。

    8. 清除浏览器缓存: 尝试清除浏览器缓存或使用无痕模式访问页面。

    9. 增强错误处理: 在AJAX的error函数中打印出错误信息,以便更好地诊断问题。

    10. 检查图片内容: 如果图片中包含了错误信息或者与问题相关的数据,请确保这些信息被正确地处理和展示。

    示例代码

    以下是修改后的AJAX请求代码示例:

    <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            url: 'dept.do?action=getAll',
            type: 'post',
            data: {action: 'getAll'},
            dataType: 'json',
            contentType: 'application/x-www-form-urlencoded',
            success: function(data) {
                var html = "<option value='0'>请选择部门</option>";
                $.each(data, function(index, item) {
                    if (item.id == ${staff.dept_id}) {
                        html += "<option value='" + item.id + "' selected='selected'>" + item.name + "</option>";
                    } else {
                        html += "<option value='" + item.id + "'>" + item.name + "</option>";
                    }
                });
                $("select[name='dept_id']").html(html);
                
                var dept_id = ${staff.dept_id};
                $.ajax({
                    url: 'staff.do?action=getByDeptId',
                    type: 'post',
                    data: {action: 'getByDeptId', dept_id: dept_id},
                    dataType: 'json',
                    contentType: 'application/x-www-form-urlencoded',
                    success: function(data) {
                        var html = "<option value='0'>请选择领导</option>";
                        $.each(data, function(index, item) {
                            if (${staff.id} == item.id) {
                                
                            } else if (item.id == ${staff.leader != null ? staff.leader : 0}) {
                                html += "<option value='" + item.id + "' selected='selected'>" + item.name + "</option>";
                            } else {
                                html += "<option value='" + item.id + "'>" + item.name + "</option>";
                            }
                        });
                        $("select[name='leader']").html(html);
                    },
                    error: function() {
                        alert("请求失败");
                    }
                });
            },
            error: function() {
                alert("请求失败");
            }
        });
    
        $("select[name='dept_id']").change(function() {
            var dept_id = $(this).val();
            if (dept_id > 0) {
                $.ajax({
                    url: 'staff.do?action=getByDeptId',
                    type: 'post',
                    data: {action: 'getByDeptId', dept_id: dept_id},
                    dataType: 'json',
                    contentType: 'application/x-www-form-urlencoded',
                    success: function(data) {
                        var html = "<option value='0'>请选择领导</option>";
                        $.each(data, function(index, item) {
                            if (${staff.id} != item.id) {
                                html += "<option value='" + item.id + "'>" + item.name + "</option>";
                            }
                        });
                        $("select[name='leader']").html(html);
                    },
                    error: function() {
                        alert("请求失败");
                    }
                });
            } else {
                $("select[name='leader']").html("");
            }
        });
    });
    </script>
    

    希望这些信息能帮助您解决问题。如果需要进一步的帮助,请提供更多的信息,比如服务器端的代码、错误日志或者图片中的具体内容。

    评论 编辑记录

报告相同问题?

问题事件

  • 创建了问题 7月24日

悬赏问题

  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中,如何配置环境,可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图
  • ¥15 UE5.1局部变量对蓝图不可见
  • ¥15 一共有五道问题关于整数幂的运算还有房间号码 还有网络密码的解答?(语言-python)
  • ¥20 sentry如何捕获上传Android ndk 崩溃
  • ¥15 在做logistic回归模型限制性立方条图时候,不能出完整图的困难
  • ¥15 G0系列单片机HAL库中景园gc9307液晶驱动芯片无法使用硬件SPI+DMA驱动,如何解决?