jQuery EasyUI Form -Création d'une soumission de formulaire asynchrone

Ce tutoriel vous montre comment soumettre un formulaire (Form) via easyui. Nous créons un formulaire avec les champs name, email et phone. En utilisant le plugin de formulaire easyui, le formulaire est transformé en formulaire AJAX. Le formulaire soumet tous les champs au serveur backend. Le serveur traite et renvoie certaines données à la page front-end. Nous recevons les données renvoyées et les affichons.

Créer un formulaire (Form)

    <div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
    <form id="ff" action="form1_proc.php" method="post">
        <table>
            <tr>
                <td>Name:</td>
                <td><input name="name" type="text"></input></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><input name="email" type="text"></input></td>
            </tr>
            <tr>
                <td>Phone:</td>
                <td><input name="phone" type="text"></input></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit"></input></td>
            </tr>
        </table>
    </form>

Passer au formulaire AJAX

    $('#ff').form({
        success:function(data){
            $.messager.alert('Info', data, 'info');
        }
    });

Code côté serveur

    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];

    echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";

Télécharger les exemples jQuery EasyUI

jeasyui-form-form1.zip