如何在jquery中引用id

时间:2017-06-08 06:25:05

标签: jquery

我试图通过使用jquery调用rest web service来删除行。在url字段中,我不得不在jquery中提到d。这是我的代码

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Employee List</title>
</head>
<body>

    <form id = "add">
        <h1>Add Employee</h1><br>
        <table>
        <tr><td>Id : </td><td><input type="text" id="empId" disabled="true" readonly = "true" /></td></tr>
        <tr><td>Name : </td><td><input type="text" id="name" /></td></tr>
        <tr><td>Age : </td><td><input type="text" id="age" /></td></tr>
        <tr><td>Salary : </td><td><input type="text" id="salary" /></td></tr>
        <tr><td>Address : </td><td><input type="text" id="address" /></td></tr>
        <tr><td><input type = "submit" value = "submit" ></td></tr>
        </table></form>
        <form id=  "list">
        <h1>Employee List</h1>
        <table  id= "content" border= "0">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Age</th>
                <th>Salary</th>
                <th>Address</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody id = "emp">
        </tbody>    
        </table>
    </form>
    <script>

    $(document).ready(function(){

        listEmployee();
        addEmployee();
        deleteEmployee();
    });

    function listEmployee(){

        $.ajax({

            url: '/Ram/rest/restemployees',
            type: 'GET',
            dataType: 'JSON',
            success: function(data){

                $.each(data, function(i,value){
                    $("#content tbody").append("<tr>" + "<td>" + value.id + "</td>" +
                            "<td>" + value.name + "</td>" +
                            "<td>" + value.age + "</td>" +
                            "<td>" + value.salary + "</td>" +
                            "<td>" + value.address + "</td>" +
                            "<td>" + "<button onClick='deleteEmployee()'>Edit</button" + "</td>" +
                            "<td>" + "<button id='btnDel'>Delete</button>" +"</tr>")
                });

            },
            error: function(data){

            }

        });
    }

    function addEmployee(){

        $("#add").submit(function(e){

            var employee  = new Object();
            employee.name = $("#name").val();
            employee.age = $("#age").val();
            employee.salary = $("#salary").val();
            employee.address = $("#address").val();
            e.preventDefault();
            $.ajax({

                url : "/Ram/rest/add",
                type : "POST",
                data : employee,
                success : function(data){
                    location.reload(true);
                },
                error : function(data){

                }

            });
        });

    }

    function deleteEmployee(){

        var employee = new Object();
        employee.id = $("#empId").val();
        var id = $("#empId").val();
            $.ajax({

                url : "/Ram/rest/delete/" + id  ,
                type : "GET",
                data: employee,
                success: function(data){
                    alert("2");
                    location.reload(true);
                },
                error : function(data){

                }
            });

    }

    </script>
</body>

</html>

但是url不接受id值。如何动态传递url值?

1 个答案:

答案 0 :(得分:0)

您需要删除数据,然后尝试检查以下代码: 并且网址不正确网址应为:&#34;网址:&#34; / Ram / rest / delete?id =&#34; + id,&#34;

function deleteEmployee(){

        //var employee = new Object();

        var id = $("#empId").val();
            $.ajax({

                url : "/Ram/rest/delete?id=" + id  ,
                type : "GET",
                dataType: "html",
                data: 'json',
                cache: false,
                //data: employee,
                success: function(data){
                    alert("2");
                    location.reload(true);
                },
                error : function(data){

                }
            });

    }

第二种可能的方式:

var employee = {
            "id": $("#empId").val()
        }

        $.ajax({

            url: "/Ram/rest/delete/",
            type: "GET",
            dataType: "html",
            data: 'json',
            cache: false,
            contentType: "application/json;",
            data: JSON.stringify(employee),
            success: function (data) {
                alert("2");
                location.reload(true);
            },
            error: function (data) {

            }
        });