Jak przekonwertować ten kod jQuery na funkcję jQuery?

Question

Mam kilka kodów jQuery, które powtarza się raz po raz, chciałbym zmniejszyć kod, który piszę, przez przekształcenie go w funkcje. tutaj są kody, których używam.

$('form#save-user button[name="save-user"]').click(function() { 
    var formData = 'option=saveuser&'+$('form#save-user').serialize(); 
    $.ajax({ 
     type: 'POST', 
     url: 'process.php', 
     data: formData, 
     success: function(msg){ 
      if(msg === 'empty') { 
       alert('Required Values Missing'); 
      } else if(msg === 'duplicateEmail'){ 
       alert('Email already exist'); 
      } else { 
       window.location = "index.php?users&option=edit&user_id="+msg+'&msg=success'; 
      } 
     } 
    }); 
}); 

$('form#save-user button[name="save-user-close"]').click(function() { 
    var formData = 'option=saveuser&'+$('form#save-user').serialize(); 
    $.ajax({ 
     type: 'POST', 
     url: 'process.php', 
     data: formData, 
     success: function(msg){ 
      if(msg === 'empty') { 
       alert('Required Values Missing'); 
      } else if(msg === 'duplicateEmail'){ 
       alert('Email already exist'); 
      } else { 
       window.location = 'index.php?users'; 
      } 
     } 
    }); 
}); 

$('form#save-user button[name="save-user-new"]').click(function() { 
    var formData = 'option=saveuser&'+$('form#save-user').serialize(); 
    $.ajax({ 
     type: 'POST', 
     url: 'process.php', 
     data: formData, 
     success: function(msg){ 
      if(msg === 'empty') { 
       alert('Required Values Missing'); 
      } else if(msg === 'duplicateEmail'){ 
       alert('Email already exist'); 
      } else { 
       window.location = 'index.php?users&option=create'; 
      } 
     } 
    }); 
}); 

chciałbym wiedzieć kilka rzeczy,

a) W nawiązaniu do powyższego kodu, w jaki sposób mogę przekonwertować go do funkcji, jak kod mają bardzo mało zmian podobnych, selektor name i adres URL okna window.location.

b) co nazywam poniższym kodem, czy to jest funkcja? funkcja na przejść? lub funkcja dynamiczna?

$('selector').event(function(){ 
    //jQuery Code in wake of event being triggered. 
}); 

Answer 1

chciałbym napisać brakujące wtyczki do niego:

(function ($) { 

jQuery.fn.myClick = function (destination) { 
    this.click(function() { 
     var formData = 'option=saveuser&'+$('form#save-user').serialize(); 
     $.ajax({ 
      type: 'POST', 
      url: 'process.php', 
      data: formData, 
      success: function(msg){ 
       if(msg === 'empty') { 
        alert('Required Values Missing'); 
       } else if(msg === 'duplicateEmail'){ 
        alert('Email already exist'); 
       } else { 
        window.location = destination(msg); 
       } 
      } 
     }); 
    }); 
} 

}(jQuery)); 

Następnie nazwać to byłoby po prostu zrobić:

$('form#save-user button[name="save-user-close"]').myClick(function() { 
    return 'index.php?users&option=create'; 
}); 

i

$('form#save-user button[name="save-user"]').myClick(function (msg) { 
    return "index.php?users&option=edit&user_id="+msg+'&msg=success'; 
}); 

Powinieneś być w stanie zobaczyć dokąd zmierzamy; dodajemy parametry do stworzonej przez nas małej metody, w której można określić, jakie zmiany zachodzą między poszczególnymi połączeniami.

Ponieważ w tym przypadku window.location zależy od odpowiedzi AJAX (i nie znamy odpowiedzi, gdy wywołujemy funkcję!), Nie możemy po prostu podać ciągu znaków (lub czegoś podobnego) jako parametru. Zamiast tego przekazujemy funkcję, którą wywołujemy po otrzymaniu odpowiedzi AJAX pod warunkiem, że msg jest zmienną; i polegać na funkcji, aby zapewnić ciąg, który ustawiamy na window.location.

---

Co do drugiego pytania, przechodzą procedurę obsługi zdarzeńdo metod jQuery zdarzeń; obsługa zdarzeń będzie odniesienie funkcja (zwykle odwołanie do anonimowej funkcji)

Answer 2

a) chciałbym rozpocząć od przyjmowania zmieniających się pól jako params:

function doPost(redirectUrl) { 
    var formData = 'option=saveuser&'+$('form#save-user').serialize(); 
    $.ajax({ 
     type: 'POST', 
     url: 'process.php', 
     data: formData, 
     success: function(msg){ 
      if(msg === 'empty') { 
       alert('Required Values Missing'); 
      } else if(msg === 'duplicateEmail'){ 
       alert('Email already exist'); 
      } else { 
       window.location = redirectUrl.indexOf("{0}") >= 0 ? redirectUrl.replace("{0}", msg) : redirectUrl; 
      } 
     } 
    }); 
} 

$('form#save-user button[name="save-user"]').click(function() { 
    doPost("index.php?users&option=edit&user_id={0}&msg=success"); 
}); 

$('form#save-user button[name="save-user-close"]').click(function() { 
    doPost("index.php?users");  
});  

b) bym to anonimowy Podprogram (funkcja) zadzwonić.

Answer 3

powinien to zrobić to za ciebie:

JQuery:

function saveuser(formData) { 
    $.ajax({ 
     type: 'POST', 
     url: 'process.php', 
     data: formData, 
     success: function(msg){ 
      if(msg === 'empty') { 
       alert('Required Values Missing'); 
      } else if(msg === 'duplicateEmail'){ 
       alert('Email already exist'); 
      } else { 
       window.location = "index.php?users&option=...'; 
      } 
     } 
    }); 
} 

HTML:

<element onClick="saveuser('the-form-data')"></element>