How to pass a query string to Ajax call with jQuery?

问题

This is a follow up to my previous question (unresolved).

I fetch items from the database and display them in a for loop. I use jQuery to hide one of the rows. Now I need to get the main_id of that hidden row and pass it to $.ajax. In the original question Paul suggested to use alert(this.attr("title")); but this line stops the execution of the $.ajax call and the call is not executed. When I comment out the alert alert(this.attr("title")); then the ajax call goes through. In that case, I get an error because the display_false() function in the handler does not get the value of the main_id.

This is the html of the "hide" link with title=%s.

<a class="false" title=%s href="/useradminpage?main_id=%s&display=false"><span class="small">(hide)</span></a>

So I need to pass the value of the main_id stored in alert(this.attr("title")); to the function display_false() when the ajax call is executed.

How can I do this?

The relevant code is below:

The Script

        self.response.out.write("""
<html>
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/main.css" /> 
<title>User Admin Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>

$(document).ready(function() {

    alert("1 - document ready is called")
    $("a.false").click(function(e) {
        $(this).closest("tr.hide").hide("slow");
        e.preventDefault();
        alert("2 - row is hidden")
    });

    $("a.false").click(function() {
        alert("3 - ajax")
        //the following alert stops the ajax call from executing
        alert(this.attr("title"));

        $.ajax({
            url: "/useradminpage?main_id=%s&display=false",
            data: {main_id: "title"}
            success: function(data) {
            display_false()
            alert(4 - "returned");
            }
        });
    });
});


</script>
</head>
<body>
""")

HTML

#-----------main table------------#
            main_id = self.request.get("main_id")

            self.response.out.write("""<table class="mytable">
            <tr class="head">
            <th  width="80%">links</th><th>edit tags</th>
            </tr>    
            """)        

            query = Main.all()
            query.filter("owner", user)
            query.filter("display", True)
            query.order("-date")
            cursor = self.request.get("cursor")
            if cursor: query.with_cursor(cursor)
            e = query.fetch(100)
            cursor = query.cursor()

            for item in e:
                main_id = item.key().id()
                self.response.out.write("""
                <tr class="hide">
                <td><a href="%s" target="_blank">%s</a><span class=small> (%s) </span><br />
                <span class=small>%s</span>
                <a href="/edit?main_id=%s"><span class="small">(edit)</span></a>
                <a class="false" title=%s href="/useradminpage?main_id=%s&display=false"><span class="small">(hide)</span></a>
                <a href="/comment?main_id=%s"><span class="small">(comments)</span></a></td>
                <td><a href="/tc?url=%s&main_id=%s&user_tag_list=%s" title="edit tags">%s</a>
                </td>
                </tr>
                """ % tuple([item.url, item.title, urlparse(item.url).netloc,
                f1.truncate_at_space(item.pitch), main_id, 

                main_id,

                main_id, main_id,
                item.url, main_id, (", ".join(item.tag_list)),
                (", ".join(item.tag_list)),]))

            self.response.out.write("""</tbody></table>""")    

            display = self.request.get("display")

            def display_false():
                if display == "false":
                    main_id = self.request.get("main_id")
                    #I tried to get the "title" but this does not work
                    #main_id = self.request.get("title")
                    k = Main.get_by_id(int(main_id))
                    k.display = False                    
                    k.put()

            display_false()    
            ...

Update

Updated the code according to James Montagne's answer (with a few changes). Now, for some reason, document ready is not loading, and the call to hide the row is not working, but ajax call to update the database is working. What am I doing wrong?

<script>

$(document).ready(function() {

    alert("1 - document ready is called")
    $("a.false").click(function(e) {
        $(this).closest("tr.hide").hide("slow");
        var main_id = this.attr("title");
        var display = "false";
        e.preventDefault();
        alert("2 - row is hidden")
    });

    $("a.false").click(function() {
        alert("3 - ajax");

        $.ajax({
            url: "/useradminpage?main_id=%s&display=false",
            data: {main_id: "main_id", display: "display")},
            success: function(data) {
            display_false()
            alert(4 - "returned");
            }
        });
    });
});


</script>

回答1:

You don't need to alert that value, you need to pass it. Currently you are passing the string title.

    $.ajax({
        url: "/useradminpage?main_id=%s&display=false",
        data: {main_id: this.attr("title")}
        success: function(data) {
        display_false()
        alert(4 - "returned");
        }
    });

回答2:

<script>

$(document).ready(function() {

    alert("1 - document ready is called")
    $("a.false").click(function(e) {
        $(this).closest("tr.hide").hide("slow");
        var main_id = this.attr("title");
        var display = "false";
        e.preventDefault();
        alert("2 - row is hidden")
    });

    $("a.false").click(function() {
        alert("3 - ajax");

        $.ajax({
            url: "/useradminpage?main_id=%s&display=false",
            data: {main_id: "main_id", display: "display")},
            success: function(data) {
            display_false()
            alert(4 - "returned");
            }
        });
    });
});


</script>

来源：https://stackoverflow.com/questions/7698706/how-to-pass-a-query-string-to-ajax-call-with-jquery

标签

javascript

jquery

query-string