AJAX

2013-08-30 7 views
5

का उपयोग कर PHP फ़ाइल को कॉल करना मैं jQuery में $ .ajax() फ़ंक्शन का उपयोग करके एक php फ़ाइल कॉल करने का प्रयास कर रहा हूं हालांकि यह काम नहीं कर रहा है। जब पेज पर एक बटन क्लिक किया जाता है निम्नलिखित कोड चलता है:AJAX

<form onClick="return false;" class="reg-form"> 

    <div class="row"> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="name">First Name</label> 
       <input type="text" id="name" class="form-control" autofocus="autofocus"> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="email">Email Address</label> 
       <input type="text" id="email" class="form-control"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="password">Password</label> 
       <input type="password" id="password" class="form-control"> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="password-confirm">Confirm Password</label> 
       <input type="password" id="password-confirm" class="form-control"> 
      </div> 
     </div> 
    </div> 

    <button class="btn trans reg-btn">Sign Up</button> 

    <div class="reg-msg"> 
     <span id="password-error-msg">Passwords do not match.</span> 
    </div> 

</form> 

मैं प्रपत्र के onClick झूठी वापस जाने के लिए इतना है कि प्रपत्र लोड नहीं होता है की स्थापना की है:

if($error === false) { 
     alert($error); 
     $.ajax({ 
      url: '/new-user.php', 
      type: 'POST', 
      data: { 
       name: $('#name').val(), 
       email: $('#name').val(), 
       password: $('#name').val() 
      } 
     }); 

यह मेरा रूप है जब सबमिट किया गया पृष्ठ तो jQuery चला सकता है।

किसी भी मदद की बहुत सराहना की जाती है।

+0

क्या करता है 'काम नहीं कर रहा' क्या मतलब है? क्या PHP स्क्रिप्ट नहीं कहा जा रहा है? – GrandmasterB

+3

निश्चित रूप से 'onClick =" झूठी वापसी; "' हटा दिया जाना चाहिए। यह बेकार है –

+0

आप अपने php में केवल नाम प्रविष्टि भेज रहे हैं, आपके पास कौन सी त्रुटियां या समस्याएं हैं? आप क्या होने की उम्मीद करते हैं, और वास्तव में क्या होता है? – aynber

उत्तर

15

मुख्य कारण लोगों रूपों का उपयोग है ताकि आप (अपने मामले एक PHP स्क्रिप्ट में) एक

कार्रवाई परिभाषित कर सकते हैं,

विधि (GET या POST) और

सबमिट करें जो फ़ॉर्म में सभी जानकारी कैप्चर करता है और स्वचालित रूप से इसे सर्वर पर भेजता है।

यह अच्छा है जब आपके पास 20-30 इनपुट होते हैं या आप एकाधिक फ़ाइल इनपुट प्रबंधित कर रहे हैं। आपके मामले में आप अपने ajax समारोह में डेटा पुनर्प्राप्ति संभाल रहे हैं, तो आप कोई बटन, कार्रवाई या विधि परिभाषित प्रस्तुत किया है ताकि आप सब पर एक फार्म का उपयोग नहीं कर से बातें बहुत आसान बना सकता है ....

$.ajax({ 
     url: '/new-user.php', 
     type: 'POST', 
     dataType: "json", 
     data: { 
      name: $('#name').val(), 
      email: $('#email').val(), 
      password: $('#password').val() 
     } 
    }).done(function(data){ 
      alert(JSON.stringify(data)); 
    }); 

मैं सादगी के लिए स्वरूपण divs ...

<input type="text" id="name" class="form-control" autofocus="autofocus"> 
<input type="text" id="email" class="form-control"> 
<input type="password" id="password" class="form-control"> 

उपरोक्त कोड, आपके इनपुट में डेटा हड़पने जाएगा php स्क्रिप्ट और उत्पादन के लिए यह डेटा है कि में अपने php स्क्रिप्ट से वापस भेज दिया जाता है भेजने के बाहर छोड़ दिया है अलर्ट

और सबसे महत्वपूर्ण बात यह है कि आपका पृष्ठ रीफ्रेश नहीं होगा!

+0

को इंगित करने के लिए मेरे कोड को संपादित किया गया @ एओ क्यों फॉर्म का उपयोग न करने वाले फॉर्म का उपयोग करें !! – Sebastien

+0

शानदार धन्यवाद। – stu177

+0

आपका स्वागत है कि यह मदद करता है! –

0

निम्नलिखित कोड का प्रयास करें:

$(".reg-btn").click(function(e) 
{ 
    e.preventDefault(); 
    $.ajax({ 
     url: '/new-user.php', 
     type: 'POST', 
     data: { 
      name: $('#name').val(), 
      email: $('#name').val(), 
      password: $('#name').val() 
     }, 
     success:function(response){ 
      //Do something here... 
     } 
    }); 
}); 

कृपया ध्यान दें कि आप एक अपने फार्म पर सबमिट बटन की जरूरत नहीं है कि। तो रिटर्न फाल्स किसी काम का नहीं है ..

+0

ऐसा होता है कि पृष्ठ रीफ्रेश होता है। – stu177

+0

नीचे दिए गए कोड को जोड़ने का प्रयास करें: $ ("reg-btn")। क्लिक करें (फ़ंक्शन (ई) { ई। PreventDefault(); ...... उसी कोड को – vinayjags

1

मैं वास्तव में अपने फॉर्म डेटा को क्रमबद्ध करता हूं क्योंकि यह कम कोड है। इसके अलावा आप इसे कई रूपों के साथ उपयोग कर सकते हैं। उदाहरण के लिए आपके पास एक छिपी हुई इनपुट हो सकती है जिसमें कार्य संख्या होती है और कार्यों को प्रतिनिधि करने के लिए एक php स्क्रिप्ट होती है। या आपके पास स्क्रिप्ट के स्थान को पास करने के लिए सबमिट फ़ंक्शन के लिए एक और चर हो सकता है। इसलिए मैं निम्नलिखित रूपों जैसे अपने फॉर्म जमा करता हूं।

HTML:

<form onsubmit="submitForm('#myForm'); return false;" id='myForm'> 
    <input type='text' name='name'/> 
    <input type='text' name='email'/> 
    <input type='text' name='password'/> 
    <input type='submit'/> 
</form> 

जावास्क्रिप्ट:

function submitForm(formId){ 
    var formData = $.(formId).serialize(); 

    $.ajax({ 
     url: '/script.php', 
     type: 'POST', 
     data: formData, 
     success:function(response){ 
      alert(response); 
     } 
    }); 

}