changement prototype de script à jquery un

Question

J'ai ce formulaire soumettre le code:

Event.observe(window, 'load', init, false); 
function init() { 
    Event.observe('addressForm', 'submit', storeAddress); 
} 
function storeAddress(e) { 
    $('response').innerHTML = 'Adding email address...'; 
    var pars = 'address=' + escape($F('address')); 
    var myAjax = new Ajax.Updater('response', 'ajaxServer.php', {method: 'get', parameters: pars}); 
    Event.stop(e); 
} 

Comment puis-je changer pour travailler avec jQuery?

Voici le formulaire HTML:

<form id="addressForm" action="index.php" method="get"> 
    <b>Email:</b> <input type="text" name="address" id="address" size="25"><br> 
    <input name="Submit" value="Submit" type="submit" /> 
    <p id="response"><?php echo(storeAddress()); ?></p> 
</form> 

ce qui est code php au début du document:

<?php 
require_once("inc/storeAddress.php"); 
?> 

Answer 1

Quelque chose comme ceci:

$(function() { 
    $('#addressForm').submit(function() { 
     $('#response') 
      .html('Adding email address...') 
      .load('ajaxServer.php', { address: $('#address').val() }, function() { 
       $('#address').val(''); 
      }); 
     return false; 
    }); 
}); 

Remarque : lors de l'utilisation .load(), la méthode POST est utilisée si des données sont fournies en tant qu'objet; sinon, GET est supposé. Donc, si vous voulez transmettre les données GET, utilisez:

.load('ajaxServer.php', 'address='+$('#address').val()); 

Ou tout simplement obtenir les données soumises de $_POST['address'] qui serait plus sage et plus facile à mon avis.

Answer 2

Donnez-ce un tourbillon ..

function init() 
{ 
    $('#addressForm').submit(storeAddress); 
} 

function storeAddress(e) 
{ 
    $('#response').html('Adding address...'); 

    var params = 'address=' + $('#address').val(); 

    $('#response').load('ajaxServer.php', params); 

    $.ajax({ 
     url : 'index.php', 
     data : $('#addressForm').serialize(), 
     success : function(data) 
     { 
      alert('yay, form data sent!'); 
     } 
    }); 

    // Fix - stops page reload 
    return false; 
} 

$(document).ready(init); 

Answer 3

Vous pouvez convertir le script comme ceci:

$(function() { 
    $('#addressForm').submit(function(e) { 
    $('#response').html('Adding email address...'); 
    $.ajax({ 
     url: 'ajaxServer.php', 
     type: 'GET', 
     data: {'address': $('#address').val() }, 
     success: function(response) { 
      $('#response').html(response); 
     } 
    }); 
    e.preventDefault(); 
    return false; 
    });​ 
}); 

Voici une diminution des effectifs équivalents:

• .html() pour l'appel innerHTML
• $('#id') selector pour findi ng par un ID
• $.ajax pour l'appel ajax
  • data est les paramètres transmis, définissez la paire (aucune adresse = ...)
  • success fonctionne de rappel lorsque la demande complète
    • mis la réponse dans les id="response" div ici