如何使用ajax从服务器发布和获取响应

时间:2018-02-28 06:40:03

标签: javascript php html css ajax

我正在设计html和css中的基本注册表单,点击提交按钮,数据将通过post方法n添加到服务器数据库中,因此响应将显示在与json对象相同的注册页面上。为此目的,我使用的是javascript和ajax,但它无法正常工作。

HTML

   <div class="column1" style="background-color:lightgrey;">
       <div class="form">
    <div class="formdetail">
    <h3>Individual Registration</h3>
    <label for="fname"> Name</label><br>
  <input type="text" size="40" id="name" name="name" placeholder="Enter your 
   name.." required><br><br>
      <label for="phonenumber">Mobile Number</label>
        <br/>
        <input type="text" id="mobileno" name="mobileno"  maxlength="13" 
            size="40" placeholder="Enter your mobile number..." class = 
     "numeric" /><br>
   <span class="error" style="color: red; display: none">Input digits (0 - 
  9)</span>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    var specialKeys = new Array();
    specialKeys.push(8); //Backspace
    $(function () {
        $(".numeric").bind("keypress", function (e) {
            var keyCode = e.which ? e.which : e.keyCode
            var ret = ((keyCode >= 48 && keyCode <= 57) || 
        specialKeys.indexOf(keyCode) != -1);
            $(".error").css("display", ret ? "none" : "inline");
            return ret;
        });
        $(".numeric").bind("paste", function (e) {
            return false;
        });
        $(".numeric").bind("drop", function (e) {
            return false;
        });
    });
  </script>

 <br>




      <label for="email">Email</label><br>
      <input type="text" size="40" id="email" name="email" pattern="[^ 
      @]*@[^ @]*" name="email" placeholder="Enter your email-id..." 
   required><br><br>

   <label for="Name">Password</label>
  <br/>
  <input type="password" id="password" name="password" size="40" placeholder="Enter your password" id="username" required>
  <br/>
  <br/>



      <input type="date" id="dt" onchange="mydate1();" hidden/>
      <input type="text" id="dob" name="dob" onclick="mydate();" hidden />
          <input type="button" Value="Date of Birth" onclick="mydate();" />

            <script>

         function mydate()
        {
          //alert("");
    document.getElementById("dt").hidden=false;
     document.getElementById("dob").hidden=true;
     }
    function mydate1()
     {
      d=new Date(document.getElementById("dt").value);
    dt=d.getDate();
      mn=d.getMonth();
        mn++;
      yy=d.getFullYear();
      document.getElementById("dob").value=dt+"/"+mn+"/"+yy
      document.getElementById("dob").hidden=false;
          document.getElementById("dt").hidden=true;
       }

         </script>




            <br><br>
            <label for="address">Address</label><br>
              <input type="text" id="address"  size="40" name="address" 
      placeholder="Enter your address..." required><br><br>

          <label for="country">Country</label><br>
             <input type="text" id="country" size="40"  name="country" 
            placeholder="Enter your country name....." required><br><br>

               <label for="State">State</label><br>
           <input type="text" id="state" size="40" name="state" 
             placeholder="Enter your state name....." required><br><br>

        <label for="city">City</label><br>
          <input type="text" id="city" size="40" name="city" 
        placeholder="Enter your city name....." required><br><br>


            <input type="hidden"  id="category" name="category" 
             value="Individual">



            <input type="button" id="submit"  
                     onclick="myFunction();" value="Submit" ><br>

的javascript

          <script>


function myFunction(){

  var name=document.getElementById("name").value;
  var mobileno=document.getElementById("mobileno").value; 
  var email=document.getElementById("email").value;
  var password=document.getElementById("password").value;
  var dob=document.getElementById("dob").value;
  var address=document.getElementById("address").value;
  var country=document.getElementById("country").value;
  var state=document.getElementById("state").value;
  var city=document.getElementById("city").value; 

    var country=document.getElementById("country").value; 

  var dataString ='name='+ name + '&mobileno=' + mobileno + '&email=' + 
  email + '&password=' + password + '&dob=' + dob +  '&address=' + address + 
   '&country=' + country + '&state=' + state + '&city=' + city + '&country=';

  if(name == '' || mobileno == '' || email == '' || password == '' || dob == '' || address == '' || country == '' || state == '' || city == '' || country == '') {

    alert("Please Fill All Fields");
    }
    else
  {

     $.ajax({
              type:"POST",
              url:"https://smilestechno.000webhostapp.com/Register.php",
              data: dataString,
              cache: false,
              success: function(html){

                alert(html);

              }
     });

    }
    return false;
}

0 个答案:

没有答案