WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   Submitta formulär med jQuery och AJAX? (https://www.wn.se/forum/showthread.php?t=34396)

sandstream 2009-01-12 15:32

Jag håller på med min första "AJAX-funktion" med hjälp av jQuery. Har kommit så långt att jag kan klicka på en knapp på HTML-sidan och få tillbaka ett värde från serversidan (ASP) som sedan skrivs ut på HTML-sidan (eller ASP-sidan om man så vill).

Koden på klientsidan ser ut så här:


<script type="text/JavaScript">
$(document).ready(function(){
$("#generate").click(function(){
$("#quote p").load("ajaxtest.asp");

});
});
</script>

<HTML.......
<div id="quote">

</p></div>
<input type="submit" id="generate" value="Generate!">
</HTML>

Så långt är allt frid och fröjd men nu vill jag förändra så att ASP-sidan kan läsa i databasen med ett värde från formuläret men jag kan inte riktigt komma på hur jag ska göra.
(Är grön när det gäller javascript så det tar tid att bara försöka förstå de relativt enkla jQuery-kommandona :unsure: ).

Jag vill skapa ett formulär som innehåller en lista, ungefär så här:

<select id=generate>
<option value=123>Produkt 1</option>
<option value=456>Produkt 2</option>
<option value=789>Produkt 3</option>
</select>

När besökaren väljer "Produkt 2" är det värdet "456" som ska skickas till "ajaxtest.asp" .

Någon som vet hur jag ska göra?

Silodon 2009-01-12 15:44

Du kan använda val() funktionen för att hämta värdet från din lista och get() för att skicka datan till ditt asp script. Exakt hur du använder dom kan du läsa om i jQuerys dokumentation http://docs.jquery.com/

sandstream 2009-01-12 17:23

Tackar, jag ska kolla dokumentationen!

emilv 2009-01-12 18:28

$.post-funktionen funkar också, om du föredrar POST framför GET

sandstream 2009-01-12 19:36

Javascript är mindre kul när man knappt förstår vad man gör men till slut fick jag till det och koden blev så här:

$(document).ready(function(){
$("#generate").change(function(){
// get the ticker symbol and build URL
var xx_input = $("#generate").val();
var xx_url = "ajaxtest.asp";
$.ajax({
url:xx_url,
data:{ url:escape(xx_input) },
dataType:"html",
success:function(data){ $("#quote p").html( data );},
error:function(xhr,err,e){ alert( "Error: " + err ); }
}); // $.ajax()
return false;
}); // .submit()

sandstream 2009-01-12 19:38

Citat:

Originally posted by emilv@Jan 12 2009, 19:28
$.post-funktionen funkar också, om du föredrar POST framför GET
Vad är skillnaden mellan POST och GET i det här fallet?

I ett vanligt forumlär skickas ju parametrarna i URL:en med GET och "dolda" med POST.

martine 2009-01-13 06:11

Citat:

Ursprungligen postat av sandstream
Javascript är mindre kul när man knappt förstår vad man gör men till slut fick jag till det …

Själv blir jag mest förvirrad av alla JQuery:s "förkortningar"… :rolleyes:

Citat:

Ursprungligen postat av sandstream
Vad är skillnaden mellan POST och GET i det här fallet?

I ett vanligt forumlär skickas ju parametrarna i URL:en med GET och "dolda" med POST.

Det är samma sak, det är ju en del av http.

Titta exempelvis på w3c om du undrar när du ska använda vad. Eller en tramsig diskussion här.

Kort sagt så skickas POST med som en bilaga vilket gör att man kan skicka mycket större datamängder och även filer. Med GET däremot så skickar du med datan som "en del av länken" om man får uttrycka sig så (i och med att det är en "länk" så blir den dessutom synlig för besökare och kan bokmärkas när man använder formulär vilket kan vara både bra och dåligt - men vad det gäller Ajax så blir spelar detta i stort sett igen roll) - dessutom är GET (eftersom det är "länkar") känsligare för teckenkodningsproblem.


Alla tider är GMT +2. Klockan är nu 00:10.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson