Avatar billede AnyFellow Mester
20. april 2012 - 11:24 Der er 3 kommentarer og
1 løsning

Udskriv data via ajax

Jeg har denne funktion:
<script type="text/javascript"> 
  $(document).ready(function() {
      $('#search').submit(function() {
          $.ajax({
              type: $(this).attr('method'),
              url: $(this).attr('action'),
              data: $(this).serialize(),
              success: function(responseText) {
                  $('#status_message').html(responseText);
              }
          });

          return false;
      });
  });
</script>


Funktionen er ret simpel. Brugeren indtastet noget i et input-felt, og afhængig af resultatet, har funktionen hidtil udskrevet en linje tekst i en div.

Nu har jeg dog fået et nyt behov, og har i den forbindelse brug for hjælp til at få funktionen rettet til.

Jeg vil gerne have funktionen ændret således den kan håndtere 2 forskellige svar. Jeg forestiller mig at svarene kommer i JSON-formatet, dels fordi det anbefales men også fordi det giver mig mulighed for lettere at tilføje yderligere muligheder hvis behovet skulle opstå:

{"result":"1", "data":"Ingen fundet."}
Indholder af "data" udskrives til div på samme måde som i funktionen.

{"result":"2", "data":"test.html."}
Brugeren redirectes til siden test.html.

Nogen der kan hjælpe, evt. også give feedback på om funktionen er opbygget helt håbløst?

Jeg er nybegynder på ajax-området og vil gerne gøre tingene rigtigt.
Avatar billede olsensweb.dk Ekspert
20. april 2012 - 12:26 #1
prøvat at lave din success om til dette
success: function(responseText) { 
    var arr = jQuery.parseJSON(responseText);
    var msg ="";
    switch(arr['result']){
        case "1": msg=arr['data']; $('#status_message').html(msg); break;
        case "2": window.open (arr['data'],'_self',false); break;
        default: msg="ukendt fejl";    $('#status_message').html(msg);  break;                   
    }   
}
Avatar billede intenz Novice
20. april 2012 - 12:29 #2
Overordnet ser det fint nok ud, det kan dog være smart at placere callback funktionen udenfor dit AJAX kald, hvis du skal lave noget lidt mere avanceret.

Jeg syntes dine variabler er lidt ulogiske, så jeg har omdøbt dem til:
{"action":"html", "data":"Ingen fundet."}
{"action":"redirect", "data":"test.html."}

Du kan prøve at kigge på denne kode (ikke testet):

<script type="text/javascript">
    var search_callback = function(result) {
        if (typeof result.action !== 'undefined' && typeof result.data !== 'undefined') {
            if (result.action === 'redirect') {
                window.location = result.data;
            } else if (result.action === 'html') {
                $('#status_message').html(result.data);
            }
        }
    };
   
    $(document).ready(function() {
        $('#search').submit(function() {
            $.ajax({
                type: $(this).attr('method'),
                url: $(this).attr('action'),
                data: $(this).serialize(),
                success: function(result) {
                    search_callback(result);
                }
            });

            return false;
        });
    });
</script>
Avatar billede intenz Novice
20. april 2012 - 12:32 #3
Hov, du mangler også lige at definere dataType i din ajax kald.

Ændre til:

$.ajax({
                type: $(this).attr('method'),
                url: $(this).attr('action'),
                data: $(this).serialize(),
                dataType: 'json',
                success: search_callback
            });
Avatar billede AnyFellow Mester
20. april 2012 - 13:20 #4
Jeg har valgt at anvende løsningen fra intenz der fungerer som forventet.

Tak for hjælpen.
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