0

在我的我有一个代码，应该从表单$('#my_form').submit(function()中添加一些关于所选歌曲的更多信息。my_form我希望它能够更改info_table每个表单提交的内容（如果标记了不同的歌曲）。我怎样才能做到这一点 ？如果我离开return false;，那么页面将不再重新加载。

<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

<form id="my_form">
<table border='2' id="my_table"></table>
<input type="submit" value="Show song info" id="submit_button">
</form>
<table border='2' id="info_table"></table>

<script>
var my_xml;
$(document).ready(function()  
{ 
    $.get("songs_2.xml", function(d){
        my_xml = d;
        //$('body').append("<table border='2'>");
        var html = "";
        var i = 0;

        $(d).find('song').each(function(){
            var $song = $(this);
            var title = $song.find('title').text();
            var artist = $song.find('artist').text();
            var cover = $song.find('cover').text();
            var id = $song.find("id").text();

            html += "<tr><td>"+id+"</td><td width='120'><b>" + artist + " </b></td><td width='150'> " + title + "</td><td>";
            html += "<img src='" + cover + "' height='50' width='50'/></td><td> <input type='radio' name='which' value='"+id+"'></td></tr>" ;
            $('#my_table').append($(html));
            html = ""
            i++;
        });
    });
});

$('#my_form').submit(function()
{
    var i = $("#my_form input[type='radio']:checked").val();
    $.get("songs_2.xml", function(d){
        my_xml = d;
        //$('body').append("<table border='2'>");
        var html = "";
        var i = 0;

        $(d).find('song').each(function(){
            var $song = $(this);
            var title = $song.find('title').text();
            var artist = $song.find('artist').text();
            var cover = $song.find('cover').text();
            var id = $song.find("id").text();   
        $('#info_table').html("<tr><td>" + ALOTOFINFO + "</td></tr>");
        });
    });
    return false;
});
</script>
</body>
</html>
4

1 回答 1

1

您需要防止默认行为，form submit 我修改了您的代码以考虑在每个循环中调用 jQuery.html 的性能，这也只会添加一行 

$('#my_form').submit(function(e)
{
    e.preventDefault(); 
    var i = $("#my_form input[type='radio']:checked").val();
    $.get("songs_2.xml", function(d){
        my_xml = d;
        var html = "";

        $(d).find('song').each(function(){
            var $song = $(this);
            var title = $song.find('title').text();
            var artist = $song.find('artist').text();
            var cover = $song.find('cover').text();
            var id = $song.find("id").text();   
            html = html+"<tr><td>" + ALOTOFINFO + "</td></tr>"; 

        });
        $('#info_table').append(html); 
    });
});

我希望这可以帮助:)

于 2013-05-21T12:48:45.027 回答