Как отправить любую форму с помощью одной функции jQuery / Ajax? Не уверен как

Question

Две вещи, которые я пытаюсь достичь, и мне нужна помощь с

1) Нажмите ссылку и загрузите ее в любой элемент div на странице, указанный в самой ссылке, что я могу сделать следующим образом:

<div id="box">      
    <a href="test1.php" data-target-div="target1" class="menu-item">Item1</a>
    <a href="test2.php" data-target-div="target2" class="menu-item">Item2</a>     
    <a href="form.html" data-target-div="target1" class="menu-item">Open Form</a>     
</div>
<div id="target1"></div>  
<div id="target2"></div>  

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">


     $(document).ready(function(){

          $('a.menu-item').click(function(e){

            e.preventDefault(); // prevent default click event (equivalent to 'return false;')

            var targetDiv = $(this).data('target-div'); // $(this) is a reference to the menu item we clicked

            var href = $(this).attr('href');                
            console.log(href);  // Write to the console to check we got the href attribute (hit F12 in your browser)

            $("div#"+targetDiv+"").load(href);

            // Note: .load won't work across domains, so both this page and the pages you're loading need to be on the same domain.
            // See this link for a possible work around: 
            // /4007925/oshibka-xmlhttprequest-nulevoi-istochnik-ne-razreshen-access-control-allow-origin

          });                  

     });

</script>  

2) Я хочу создать одну функцию jQuery / Ajax, которая обрабатывает все мои формы, выбирая значения из самой формы.Примерно так:

$(function() {

jQuery(document).ready( function($) {

var $form = $('Figure out which form I mean by finding the ID');

$form.submit( function() {
    $.ajax({
    type: 'POST',
    url: $form.attr( 'action' ), 
    data: $form.serialize(),
    success: function( response ) {
        alert(response);
    }
    });

    return false;
});   
});


});

И наконец: вместо этого оповещения (ответ);раздел, отображающий результаты в указанном DIV, аналогичном точке 1

Все еще довольно плохо знаком с jQuery, поэтому, пожалуйста, не останавливайтесь на достигнутом:)

Answer 1

Для пункта №2 все довольно просто, и вы почти у цели.

Попробуйте это

Javascript

$(document).ready(function(){
    //Target all form tags
    $("form").submit( function() {
        //Get the target div to fill response, assume it's an id
        $div = $("#"+$(this).data("result-div"));

        //Do the ajax, and reference `$(this)` for this instance that was submitted
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'), 
            data: $(this).serialize(),
            success: function( response ) {
                $div.html(response);
            }
        });

        return false;
    }); 
});

HTML

<div id='div_1'></div>
<div id='div_2'></div>
<div id='div_3'></div>
<form method='post' action='url_1.php' data-result-div='div_1'>
    <input type='hidden' name='data_1' value='1' />
    <input type='hidden' name='data_2' value='2' />
    <input type='hidden' name='data_3' value='3' />
    <input type='hidden' name='data_4' value='4' />
    <input type='submit' />
</form>
<form method='post' action='url_2.php' data-result-div='div_2'>
    <input type='hidden' name='data_5' value='1' />
    <input type='hidden' name='data_6' value='2' />
    <input type='hidden' name='data_7' value='3' />
    <input type='hidden' name='data_8' value='4' />
    <input type='submit' />
</form>
<form method='post' action='url_3.php' data-result-div='div_3'>
    <input type='hidden' name='data_9' value='1' />
    <input type='hidden' name='data_10' value='2' />
    <input type='hidden' name='data_11' value='3' />
    <input type='hidden' name='data_12' value='4' />
    <input type='submit' />
</form>

Answer 2

Вы можете использовать знаменитый плагин jQuery Form :

<script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#myForm').ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    }); 
</script> 

Существует несколько вариантов , см. Документ .