javascript - jquery 帮助创建 ajax 渲染

Question

我正在尝试创建一些 ajax。提交表单时，它不应刷新并转到操作页面。相反，它应该使用 id formcontent 呈现和替换 div 标记中的内容。

这是我的 jquery:

    // Place your application-specific JavaScript functions and classes here
    // This file is automatically included by javascript_include_tag :defaults
    $(document).ready(function() {
    // send form ved klik paa listen
    $('option').click(function ()
    {
        $(this).closest('form').submit();
    });
    });

我的 HTML:

<form method="post" id="new_konkurrancer" enctype="multipart/form-data" class="simple_form konkurrancer" action="/public/pricecompare" accept-charset="UTF-8">
    <select style=" margin-left:10px;width:370px;float: left;
        margin-top: 10px;"name="konkurrancer[form]" id="konkurrancer_form" class="select optional"><option value="">Vælg din A-kasse:</option>
    <option value="Nyhedsbrev">ASE</option>
    <option value="Quiz">Træ-industri-byg</option>
    <option value="Andet">Journalistik, kommunikation og sprog</option>
    <option value="Andet">Faglis fælles A-kasse (3F)</option>
    <option value="Andet">Danske lønmodtagere</option>
    <option value="Andet">Metalarbejderne</option>
    <option value="Andet">NNF</option>
    <option value="Andet">Byggefagense A-kasse</option>
    <option value="Andet">HK Danmark</option>
    <option value="Andet">Teknikkerne</option>
    <option value="Andet">Kristelig A-kasse</option>
    <option value="Andet">Frie funktionærer</option>
    <option value="Andet">Dana A-kasse</option>
    <option value="Andet">IT-faget og merkonomerne</option>
    </select>
    <div id="formcontent">

    Render view here on submit


    </div>

Answer 1

$(document).ready(function() {
    // send form ved klik paa listen
    $('option').click(function ()
    {
        var form=$(this).closest('form');
        $.ajax({
          type:'post',
          url:form.attr('action'),
          data:form.serialize(),
          success:function(msg){
            $('#formcontent').html(msg);
          }
        });
    });
});