0

Spring を使用するプロジェクトがあり、jQuery を使用して管理ページを作成する必要があります。すべてのユーザーのテーブルがあり、「削除」ボタンがあります。クリックすると、ユーザーはデータベースから削除されます。スクリプトがなくてもすべて正常に動作しますが、スクリプトを使用すると、ユーザーをデータベースから削除する方法と、ユーザーのログインをコントローラーに送信する方法がわかりません。テーブルから行を削除することしかできませんでしたが、ページを更新してもユーザーはまだそこにいます。スクリプト内でデータベースからユーザーを削除する方法を教えてください。

テーブル

<table id="userBase" class="data" border="1" width="100%" cellpadding="2" cellspacing="4">
    <tr>
        <th>Login</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Birthday</th>
        <th>Role</th>
        <th>Actions</th>
    </tr>
    <c:forEach items="${userList}" var="user">
        <tr>
            <td>${user.login}</td>
            <td>${user.firstname}</td>
            <td>${user.lastname}</td>
            <td>${user.birthday}</td>
            <td><c:if test="${user.roleid==1}">Admin</c:if>
                <c:if test="${user.roleid==2}">User</c:if></td>
            <td><a href="edit/${user.login}">Edit   </a>
                <a class="confirm" href="delete/${user.login}">Delete</a></td>
        </tr>
    </c:forEach>
</table>

スクリプトなしのコントローラー（現在コメントされていますが、正常に動作します） 

@RequestMapping("/delete/{userLogin}")
public String deleteUser(@PathVariable("userLogin") String userLogin) {
    userService.remove(userService.findByLogin(userLogin));
    return "redirect:/welcome";
}

スクリプトのコントローラー

@Controller
public class SpringController {

@Autowired
private UserService userService;

@RequestMapping(value = "/delete/{userLogin}", method = RequestMethod.POST)
@ResponseBody
public boolean updateUser(@RequestParam("userLogin") String userLogin) {
    userService.remove(userService.findByLogin(userLogin));
    return true;
}
}

脚本

<script>
$(document).ready(function() {
        $("#userBase .confirm").on("click",function() {
            var conBox = confirm("Are you sure ?");
            if(conBox){
                var tr = $(this).closest('tr');
                tr.css("background-color","#000000");
                tr.fadeIn(1000).fadeOut(200, function(){
                tr.remove();
            });
            } else {
                $(this).dialog("close");
            }
        });
    });
</script>
4

3 に答える 3

3

これが私のために働いたものです：

テーブル (「削除」リンクをチェック)

<table id="userBase" class="data" border="1" width="100%" cellpadding="2" cellspacing="4">
    <tr>
        <th>Login</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Birthday</th>
        <th>Role</th>
        <th>Actions</th>
    </tr>
    <c:forEach items="${userList}" var="user">
        <tr>
            <td>${user.login}</td>
            <td>${user.firstname}</td>
            <td>${user.lastname}</td>
            <td>${user.birthday}</td>
            <td><c:if test="${user.roleid==1}">Admin</c:if>
                <c:if test="${user.roleid==2}">User</c:if></td>
            <td><a href="edit/${user.login}">Edit   </a>
                <a href="${pageContext.request.contextPath}/delete/${user.login}.json">Delete</a>
        </tr>
    </c:forEach>
</table>

コントローラ

@RequestMapping(value="/delete/{userLogin}", method=RequestMethod.DELETE,
        produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public void deleteUser(@PathVariable String userLogin) {
    userService.remove(userService.findByLogin(userLogin));
}

脚本

<script>
$(document).ready(function() {
    var deleteLink = $("a:contains('Delete')");
    $(deleteLink).click(function(event) {
        var conBox = confirm("Are you sure ?");
        if(conBox){
        $.ajax({
            url: $(event.target).attr("href"),
            type: "DELETE",

            beforeSend: function(xhr) {
                xhr.setRequestHeader("Accept", "application/json");
                xhr.setRequestHeader("Content-Type", "application/json");
            },

            success: function() {
                var tr = $(event.target).closest("tr");
                tr.css("background-color","#000000");
                tr.fadeIn(1000).fadeOut(200, function(){
                tr.remove();})
            }
        });
        } else {
            event.preventDefault();
        }
        event.preventDefault();
    });
});
</script>
于 2013-08-20T09:48:42.713 に答える
0

を使用してデータを送信する場合は、 withjQueryを使用することをお勧めします。これが私がそれを行う方法です：AJAXREST

@RequestMapping(value="delete.json", method=RequestMethod.DELETE, produces="application/json")
@ResponseBody
public Boolean deleteAjaxMultiple(@RequestBody String[] gotten)
{
    for (String login : gotten)
        userService.remove(userService.findByLogin(login));
    return true;
}

このコントローラはJSONリクエストを処理します。この場合は の配列ですlogins。JavaScript次に、次のように呼び出すだけです。

$.ajax({
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    url: '/delete.json', //or whatever url works for you
    type: 'DELETE',
    data: JSON.stringify(arr), //arr is an array of logins you want to delete
    success: function(data) {
        location.reload(true); //or do whatever you want on success
    }               
});

これを設定する必要がありますJackson。詳細については、これとこれを参照してください。

于 2013-08-19T15:33:31.663 に答える
0

あなたのコードでは、ユーザーを削除するハンドラ メソッドを呼び出すために必要な URL を呼び出していません。ajaxを使ってこれをやりたいと思いますか？マークアップを追加していただけると助かります。

あなたができることは（あなたの質問とあなたのコードはかなりあいまいに見えるので今のところ）

$(document).ready(function() {
        $("#userBase .confirm").on("click",function() {
            var conBox = confirm("Are you sure ?");
            var userLogin = "sampleOnly" //maybe somewhere in your html you have this
            var url  = "mycontroller/delete/"+userLogin //A rough guess for now
            if(conBox){

                $.post(url+userLogin,function(e){
                  var tr = $(this).closest('tr');
                  tr.css("background-color","#000000");
                   tr.fadeIn(1000).fadeOut(200, function(){
                  tr.remove();
               })

            });
            } else {
                $(this).dialog("close");
            }
        });
    });
于 2013-08-19T15:29:18.327 に答える