使用JSON发送联系人信息与PHP失败

问题描述:

我想发送信息使用JSON到PHP为了处理电子邮件发送,但是当我做调试过程遵循'其他'条件..这里是代码:使用JSON发送联系人信息与PHP失败

HTML 

<form id="cbp-mc-form" class="cbp-mc-form" method="post"> 
    <div class="cbp-mc-column"> 
     <label for="name">Name (*)</label> 
     <input type="text" minlength="2" name="name" required="true" placeholder="John Doe"> 
     <label for="phone">Phone Number</label> 
     <input type="text" name="phone" placeholder="+54 11 999 999"> 
     <label for="email">Email Address (*)</label> 
     <input type="text" name="email" required="true" placeholder="[email protected]"> 
     </div> 
     <div class="cbp-mc-column"> 
      <label for="country">Country (*)</label> 
      <select id="country" name="country" required> 
       <option value="">Choose a country</option> 
       <option value="AF">Afghanistan</option> 
       <option value="AX">Åland Islands</option> 
    <option value="AL">Albania</option> 
    <option value="DZ">Algeria</option> 
    <option value="AS">American Samoa</option> 
    <option value="AD">Andorra</option> 
    <option value="AO">Angola</option> 
    <option value="AI">Anguilla</option> 
    <option value="AQ">Antarctica</option> 
    <option value="AG">Antigua and Barbuda</option> 
    <option value="AR">Argentina</option> 
    <option value="AM">Armenia</option> 
    <option value="AW">Aruba</option> 
    <option value="AU">Australia</option> 
    <option value="AT">Austria</option> 
    <option value="AZ">Azerbaijan</option> 
    <option value="ES">Spain</option> 
    <option value="YE">Yemen</option> 
    <option value="ZM">Zambia</option> 
    <option value="ZW">Zimbabwe</option> 
      </select> 
      <label>Scope of Work (*)</label> 
      <select id="scope" name="scope" required> 
        <option value="">Choose scope</option> 
        <option value="UX/IA/Strategy">UX/IA/Strategy</option> 
        <option value="Design">Design</option> 
        <option value="Development">Development</option> 
        <option value="Other">Other</option> 
      </select> 
      <label>Estimated Budget (*)</label> 
      <select id="budget" name="budget" required> 
        <option value="">Choose a budget</option> 
        <option value="Less than u$s10k">Less than u$s10k</option> 
        <option value="u$s10k-20k">u$s10k-20k</option> 
        <option value="u$s20k-50k">u$s20k-50k</option> 
        <option value=">u$s50k-100k">u$s50k-100k</option> 
        <option value="">More than +u$s100k</option> 
       </select> 
     </div> 
    <div class="cbp-mc-row"> 
      <div id="g-recaptcha" class="g-recaptcha" data-sitekey="6LcjmAsTA12QOrP3RYXRjMLwM-bWXVEukSkvNh"></div> 
      <label for="message">Message (*)</label> 
      <textarea id="message" name="message" required></textarea> 
      </div>       
      <div class="cbp-mc-submit-wrap"> 
      <p>* Mandatory Fields</p> 
      <input type="submit" id="submit_btn" class="cbp-mc-submit" value="Enviar">        
      </div>  
</form> 

这里是JavaScript:

$(document).ready(function() { 

    $("#submit_btn").on('click',function(e) { 

     $.getScript("https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js", function() { 

      $("#cbp-mc-form").validate({ 
       debug: true,      
       rules: { 
        "name": { 
         required: true, 
         minlength: 2 
        }, 
        "email": { 
         required: true, 
         email: true 
        }, 
        "country": { 
         required: true       
        }, 
        "scope": { 
         required: true 
        }, 
        "budget": { 
         required: true 
        }, 
        "message": { 
         required: true, 
         rangelength: [50,250] 
        } 
       }, 
       messages: { 
        "name": { 
         required: "Please enter your name.", 
         minlength: "Your name must have 2 digits at least." 
        }, 
        "country": { 
         required: "Choose your country." 
        }, 
        "scope": { 
         required: "Specify the scope of your project." 
        }, 
        "email": { 
         required: "Enter an email.", 
         email: "Enter a valid email format" 
        }, 
        "budget": { 
         required: "Select a budget that best suits your needs." 
        }, 
        "message": { 
         required: "Share your needs about the project.", 
         maxlength: "Character limitation is about 400" 
        } 
       } 
     }); 

     console.log($("#cbp-mc-form").valid()); 
     if($("#cbp-mc-form").valid()) { 

      post_data = { 
        'user_name' : $('input[name=name]').val(), 
        'user_email' : $('input[name=email]').val(), 
        'phone'  : $('input[name=phone]').val(), 
        'country' : $('select[name=country]').val(), 
        'scope'  : $('select[name=scope]').val(), 
        'budget' : $('select[name=budget]').val(), 
        'message' : $('textarea[name=message]').val(), 
        'captcha' : grecaptcha.getResponse() 
      }; 

      $.ajax({ 
        type: "POST", 
        url: "php/contact_me.php", 
        async: true, 
        data: post_data ,     
        dataType: 'json', 
        success: function (data) { 
         console.log("everything looks ok" + data); 

        }, 
        error: function (xmlHttpRequest, textStatus, errorThrown) { 
         if(xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0) { 
           return; // it's not really an error 
         } else { 
           console.log("You're Bot");  
         } 
        } 
      }); 


     } 

     }); 
     e.preventDefault(); 
    }); 
}); 

所以,我记录的所有信息使用控制台试图找出问题的根源,但是当我填写表格并发送.. 。这个消息提示:console.log(“You're Bot”);我做错了什么?

另一方面,我使用'preventDefault'语句来阻止提交表单时刷新页面。

在javascript中,你必须在变量名之前加上var,可能这是你正面临的错误。

使用

var post_data = { 
'YourData' : 1 
} 
+0

同样的结果,我相信有关的preventDefault有什么不工作 – m4g4bu