Avatar billede shjorth Nybegynder
19. september 2012 - 12:25 Der er 12 kommentarer og
1 løsning

jQuery ajax post eksempel

Hejsa.

Jeg har længe benyttet mig af følgende funktion:
<script>
function gi(objectname) {
    return document.getElementById(objectname);
}

var xhr;
var ajax_count = 0;
var ajax_response = null;

$("a").click(function (e) {
e.stopImmediatePropagation();
});

function Ajax(afile,adiv,arun,loader) {
if(loader==null) { gi("loaderdiv").style.display='inline'; }

// Process Ajax
    var htm = afile.split('?');
    $.ajaxSetup( {
        url: htm[0]
      });
    var xhr = $.ajax({
        type: "GET",
        data: htm[1],
        cache: false,
        success: function(html){
           
        gi("loaderdiv").style.display='none';
            clearTimeout(timer);
            $(gi(adiv)).fadeIn(100);
          $('#'+adiv).html(html);
        },
            ajaxstop: function() {
        xhr.abort();
        }

    });
    window['xhr'] = xhr;

}
</script>

Et eksempel på måden jeg bruger det på kunne være:
<input type='text' id='a'><br>
<input type='text' id='b'><br>
<input type='button' onClick='Ajax('callback.php?a='+gi('a').value+'&b='+gi('b').value,'divNavn');">

MEN. Alt det kunne jeg godt tænke mig at lave med POST istedet for GET, da det jo begrænser en lidt.
Jeg har googlet mig igennem en masse, men kan sku ikke helt gennemskue hvordan jeg kan ændre det så jeg kan bruge post.
Håber der er nogen der kender en god metode.

På forhånd tak
Avatar billede jokkejensen Novice
19. september 2012 - 12:43 #1
http://api.jquery.com/jQuery.post/

Hvor sidder du fast? det er bare servicere data og ændre type

vh
Avatar billede shjorth Nybegynder
19. september 2012 - 12:52 #2
Jeg er ikke med på hvordan jeg sender value fra mine text bokse videre og hvordan jeg henter variablerne i php scriptet.

Normalt kan jeg jo sige $_GET['a']... Jeg vil netop gerne undgå at det er get variabler, men POST variabler jeg får.
Avatar billede jokkejensen Novice
19. september 2012 - 12:57 #3
data: "?" + $(form).serialize()

Hvor php snakken i js forummet ?

/J
Avatar billede softspot Forsker
19. september 2012 - 13:00 #4
Du kan vel bare udskifte type:'GET' med type:'POST' i dit kald til $.ajax...

Bort set fra det, synes jeg i det hele taget din kode kunne trænge til en jQueryficering, når nu du alligevel har jQuery slæbt ind på din side.

Din gi-funktion svarer f.eks. til $("#id"), hvor id er id'et af det element du vil finde frem til.

Hele din håndtering af formulardata kan gøres meget enklere med jQuery. Eksempelvis:

$(function() {
    $("form").submit(function() {
        $.ajax({
            type: "POST",
            url: $(this).action,
            data: $(this).serialize(),
            cache: false,
            success: function(html){
                $("#loaderdiv").hide();
                clearTimeout(timer);
                $("#divNavn").fadeIn(100);
                $("#divNavn").html(html);
            }
        });
    });
});

Din formular ser så nogenlunde således ud:

<form action="callback.php" method="POST">
    <input type='text' name='a'><br>
    <input type='text' name='b'><br>
    <input type='submit' value='Send'>
</form>

Som du kan se er formularen blevet enklere og mere standard (den vil også fungere, selvom jQuery ikke skulle være aktiv på siden.

Jeg er klar over at der mangler noget ifht. din egen version og at koden er mindre fleksibel, men du kan i det mindste se, hvordan det kan gøres med jQuery. I øvrigt kan du udvide fleksibiliteten ved at lægge data-atributter på formularen, der så kan fungere som ekstra parametre (f.eks. loaderens div-id og hvad du ellers kunne finde på)...
Avatar billede shjorth Nybegynder
19. september 2012 - 13:23 #5
#4
Tak for dit svar.
Når jeg tester det du har skrevet sker der dog det at det fungerer som en normal form, og blot sender siden til callback.php. Det er det jeg netop gerne vil undgå, og blot hente resultatet ind i #divNavn.

Der kommer ingen JS fejl, og jeg har husket at loade jQuery
Avatar billede softspot Forsker
19. september 2012 - 13:36 #6
Har du mulighed for at vise din sides kode i sin fulde udstrækning?
Avatar billede softspot Forsker
19. september 2012 - 13:37 #7
Ach! Der mangler nok lige en kortslutning af standard-handleren for submit:

$(function() {
    $("form").submit(function() {
        $.ajax({
            type: "POST",
            url: $(this).action,
            data: $(this).serialize(),
            cache: false,
            success: function(html){
                $("#loaderdiv").hide();
                clearTimeout(timer);
                $("#divNavn").fadeIn(100);
                $("#divNavn").html(html);
            }
        });
       
        return false;
    });
});
Avatar billede shjorth Nybegynder
19. september 2012 - 13:45 #8
Så er den lige ved at være der.

Sidste problem er så at den i #divNavn loader index.php igen, fremfor callback.php som gerne skulle loades i den div.
Avatar billede shjorth Nybegynder
19. september 2012 - 13:46 #9
Arh ja, det er selvfølgelig løst ved at kigge på url: 'xx.php'

Takker mange gange for hjælpen, vil du smide et svar :)
Avatar billede softspot Forsker
19. september 2012 - 13:53 #10
Ja, du ændrer blot url'en i form-elements action-atribut.

Velbekomme :-)
Avatar billede softspot Forsker
19. september 2012 - 14:00 #11
Det kunne i øvrigt godt være at denne linje:

url: $(this).action,


skulle se således ud i stedet:

url: $(this).attr("action"),
Avatar billede shjorth Nybegynder
19. september 2012 - 14:25 #12
Jeg er endt med at gøre således, da jeg gerne vil kalde scriptet i onclick eventet.

function Ajax(afile,adiv) {
    $("loaderdiv").show();
    $("form").submit(function() {
        $.ajax({
            type: "POST",
            url: afile,
            data: $(this).serialize(),
            cache: false,
            success: function(html){
                $("#loaderdiv").hide();
                $("#"+adiv).fadeIn(100);
                $("#"+adiv).html(html);
            }
        });
    return false;
    });
};
Avatar billede softspot Forsker
21. september 2012 - 11:27 #13
Hvorfor egentlig det? Det betyder bare at formularen ikke fungerer, hvis scripting er slået fra... der er vel ikke nogen grund til at begrænse brugere, der ikke har scripting slået til (selvom jeg har på fornemmelsen, at det er ved at være en sjældenhed nu om dage), er der?

I øvrigt kan du stadig godt koble funktionaliteten uden at sætte en inline clickhandler på selve input-elementet:

$(function() {
    $("input[name=send]").click(function() {
        $("#loaderdiv").show();
        $.ajax({
            type: "POST",
            url: $(this).action,
            data: $(this).serialize(),
            cache: false,
            success: function(html){
                $("#loaderdiv").hide();
                $("#divNavn").fadeIn(100);
                $("#divNavn").html(html);
            }
        });
       
        return false;
    });
});

Dette er med flg. formular som grundlag:

<form action="callback.php" method="POST">
    <input type='text' name='a'><br>
    <input type='text' name='b'><br>
    <input type='button' name='send' value='Send'>
</form>

Bemærk at action-atributten på form-elementet stadig er den der bestemmer, hvor formularen skal sendes hen. Det gør det lettere at håndtere fallback (som du så vælger at se bort fra med denne implementering...).
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester