Comment effectuer la recherche à partir de textfield valeur et de remplir les éléments de formulaire sans rechargement de la page?

Question

J'ai un Formulaire très simple qui a un textfield appelé CustomerNumber.Il y a d'autres éléments dans la Forme comme les sélectionne et les listes doivent contenir des valeurs liées à la CustomerNumber.

Tout ce que je veux faire c'est:

1. Utilisateur entre une valeur dans le CustomerNumber textfield et puis 'onglets' ou juste clique quelque part sur la page
2. la valeur saisie dans CustomerNumber doit ensuite être transmis à une base de données de requête qui renvoie les résultats qui sont basés sur le CustomerNumber valeur (par ex.du client commandes précédentes)
3. Les résultats de la requête de base de données sont utilisés pour remplir les autres éléments de Formulaire
4. Enfin, une fois que l'utilisateur a rempli le formulaire correctement, il doit soumettre le formulaire complet (y compris le CustomerNumber) au serveur pour traitement

J'ai juste eu un peu de regarder JQuery et d'essayer de la simple manipulation du DOM (p. ex. paragraph.text("new value")) et le premier que j'ai remarqué, c'est qu'aucun des HTML dans le code Source est modifié.Dans le navigateur, je peux voir le changement, mais pas dans le HTML.

Ce qui m'amène à me demander si je utilisateur de JQuery pour manipuler les éléments de Formulaire (par le biais d'un appel AJAX, ou quelque chose - je ne sais pas Jquery encore), comment la base de données les données renvoyées par la requête AJAX remplir le Formulaire d'éléments et la façon dont il va effectivement obtenir sur le server quand ils n'existent pas dans le HTML?

J'ai essayé de le faire en utilisant simplement les formulaires HTML et un bouton de soumission à côté de la CustomerNumber champ de texte et de faire une auto-soumission de la page, mais cela reviendrait à avoir un Formulaire dans un Formulaire qui n'est pas possible...

Answer 1

Répondre à votre question de "le code source ne semble pas changer...", cela se produit parce que votre navigateur charge le html qui est venu à partir du serveur dans une arborescence DOM, dans la mémoire...

DOM à partir de Modèle d'Objet de Document, est un arbre contenant tous les noeuds dans votre code HTML, y compris ceux, et chaque fois que le navigateur trouve un script nœud, il exécute du code et de la garde d'analyse, de sorte qu'il peut s'accumuler dans les DOM (c'est le processus typique de l'analyse d'une page).

Lorsque vous faites un clic droit de la souris et de choisir le code source de la page le code HTML de votre navigateur reçu, et non pas le traité une.

Pour mieux comprendre de quoi je parle, la essayez d'ouvrir votre exemple simple d'écrire dans un

élément avec google chrome, et après cela, ouvrez la Barre d'outils du Développeur (doit être dans le menu Outils>Outils de développement) ou juste à droite, cliquez sur inspecter sur le nouveau texte introduit.

Vous verrez que les choses que vous n'via javascript sont maintenant présents dans les DOM, que parce que les Outils de développement vous montrer le code source basé sur la mémoire de l'objet DOM et non pas basé sur le code source reçus.

Pour obtenir une réponse à partir du serveur sans rafraichissement de la page, il suffit de faire $.getjson (http://api.jquery.com/jquery.getjson/) à la une de la page sur votre serveur qui renvoie votre réponse en vous basant sur certains paramètre querystring.

Remarque, votre page de serveur peut être vous page en cours, en supposant que votre page est appelée myform.php vous pouvez faire un $.getJSON('myform.aspx?action=getfieldvalue&champ=customername', callback), puis dans votre page, vous aurait quelque chose comme ceci:

(in the Page_Load event or in the top of your page for PHP)

if(QueryString["action"]=="getfieldvalue" && QueryString["customername"]!=null){
   Response.Clear();
   Response.Write("{name:""" + DataModel.GetCustomerName(QueryString["customername"]) + """}"); 
   Response.End();
}

Le code ci-dessus n'est qu'un projet, analyse de paramètre considérations, les solutions de rechange pour la page des rappels et des optimisations n'ont pas été prises en compte.

Espérons que cela aide,

Ce qui concerne.