如何使jQuery表单提交时不刷新页面而是添加内容——像AJAX一样

在我的$('#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>

您需要阻止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); 
    });
});

我希望这对你有帮助

相关内容

最新更新

热门标签：