jQuery와 함께 Ajax를 사용하는 방법

Question

function ajaxFunction(){ 

    var ajaxRequest; // The variable that makes Ajax possible! 

try{ 
     // Opera 8.0+, Firefox, Safari 
     ajaxRequest = new XMLHttpRequest(); 
    } catch (e){ 
     // Internet Explorer Browsers 
     try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try{ 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e){ 
       // Something went wrong 
       alert("Your browser broke!"); 
       return false; 
      } 
     } 
    } 

    ajaxRequest.onreadystatechange = function(){ 
     if(ajaxRequest.readyState == 4 && ajaxRequest.status==200){ 
     alert(ajaxRequest.responseText); 
     } 
    } 


    var txt = document.getElementById("data"); 
    ajaxRequest.open("POST", "hello.php", true); 

    ajaxRequest.send("user=" + txt.value); 
     alert("here"); 
    } 

jQuery Ajax에서 정확히 동일한 기능을 작성하려면 어떻게해야합니까?

Answer 1

var txt = $('#data').val(); 

$.ajax({ 
    url: 'hello.php', 
    type: 'post', 
    data : { user: txt }, 
    success: function(data) { 
     alert(data); 
    }, 
    error : function(err, req) { 
     alert("Your browser broke!"); 
    } 
}); 

Answer 2

jquery를 사용하면이 두통을 겪지 않아도됩니다.

단지 $.ajax 기능 http://api.jquery.com/jQuery.ajax/를 사용하여 브라우저 호환성 또는 ...

간단한 예에 대해 걱정하지 않아도이를 확인하시기 바랍니다 여기

$.ajax({ 
    url: 'someserverfile.php?someparam_or_nothing', //url 
    type: 'get', //method type post or get 
    dataType: 'json', //return data type    
    success: function(data) { 
      //on success function handler 

     }, 
}); 

Answer 3

입니다 :

$(document).ready(function(){ 
if (getParameterByName('t') == ''){ 
    loadModal(); 
}else{ 
    enableButton(); 
} 

$("#btnNew").click(function(){ 
    clearModal(); 
    $("#employee_modal").modal('show'); 
}); 

$(".save").click(function(){ 
    if ($("#id").val() == 0){ 
     ajaxRequest("controller/event.php?event=save", 'POST', $("#form1").serialize(), "save"); 
    }else{ 
     ajaxRequest("controller/event.php?event=update", 'POST', $("#form1").serialize(), "update"); 
    } 
}); 

$(".delete").click(function(){ 
    var _this=$(this).parent().parent();  
    var ID=_this.attr('data-id'); 

    var ans = confirm('Are you sure you want to delete this employee?'); 

    if (ans == true) { 
     ajaxRequest("controller/event.php?event=delete", 'POST','id='+ID, "delete"); 
    } 

}); 

$(".edit").click(function(){ 
    var _this=$(this).parent().parent();  
    var ID=_this.attr('data-id'); 

    ajaxRequest("controller/event.php?event=edit", 'POST','id='+ID, "edit"); 

}); 
}); 

function loadModal(){ 
    $("#greeting").modal('show'); 
} 

function loadModal2(){ 
    $("#employee_modal").modal('show'); 
} 

function getData(url,type,data){ 
var jsonData = null; 

$.ajax({ 
    url: url, 
    dataType: "json", 
    data:data, 
    type: type, 
    async: false, 
    success: (
     function(data) { 
      jsonData = data; 
     }), 
    error: function(xhr,status,error){ 
    } 
}); 
return jsonData; 
} 

function enableButton(){ 
var activeForm = getParameterByName('t'); 

switch (activeForm){ 
    case "employee": 
     $('#btnEmployee').attr('src','assets/img/employee.png'); 
     $('#btnHome').attr('src','assets/img/home-hover.png'); 
     break; 
    default: 
     $('#btnEmployee').attr('src','assets/img/employee-hover.png'); 
     $('#btnHome').attr('src','assets/img/home.png'); 
} 
} 

function getParameterByName(name) { 
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); 
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
    results = regex.exec(location.search); 
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
} 

function clearModal(){ 
$("#myModalLabel").html(''); 
$("#myModalLabel").html('New Record'); 
$("#lastname").val(''); 
$("#firstname").val(''); 
$("#email").val(''); 
$("#id").val(0); 
} 

function ajaxRequest(url, type, data, action){ 
var jsonData = ""; 
$.ajax({ 
    url: url, //'function.php?event=update' 
    data: data, //'code=masterpogi&name=masterpogitalagalang&id=21', 
    dataType: 'json', 
    type: type, //'POST', 
    success: function(result) { 
     switch (action){ 
      case 'save': 
       if (result.success == true){ 
        alert(result.message); 
        location.reload(); 
       } 
       break; 
      case 'delete': 
       if (result.success == true){ 
        alert(result.message); 
        location.reload(); 
       } 
       break; 
      case 'edit': 
       $("#myModalLabel").html(''); 
       $("#myModalLabel").html('Update Record'); 
       $("#lastname").val(result.lastname); 
       $("#firstname").val(result.firstname); 
       $("#email").val(result.email); 
       $("#id").val(result.id); 
       loadModal2(); 
       break; 
      case 'update': 
       if (result.success == true){ 
        alert(result.message); 
        location.reload(); 
       } 
       break; 
      default: 
     } 
    }, 
    error: function() { 

    } 
}); 
}