PHP显示结果而无需刷新

时间:2018-10-14 00:25:40

标签: javascript php html refresh

这是我想显示的域域中是否可用的php代码,而无需刷新

    <form id="" method="post" class="cont">
        <input type="text" name="domain_name" class="srchFld" placeholder=""/>
        <select class="tldFld" name="suffix"> <option value=".com">.com</option> <option value=".net">.net</option> <option value=".org">.org</option> <option value=".biz">.biz</option> <option value=".info">.info</option> <option value=".dz">.dz</option> </select>
        <div align="center"><button type="submit" name="check" class="srchBtn" id="loadbasic">Search</button></div>
    </form>

<?php
if(isset($_POST['check'])) {

 if (!empty($_POST['domain_name'])){
 $name_domain = trim($_POST['domain_name']).$_POST['suffix'];
 $response = @dns_get_record($name_domain, DNS_ALL);
 if(empty($response)){
 echo "<H2 style='color:green;' >Domain $name_domain is available.</H2>";

 }else{
 echo "<H2 style='color:red;'>Domain $name_domain has taken.</H2>";
 }
 }
 else {
 echo "<H2 style='color:red;'>Error: Domain name can not be left empty.</H2>";
 }
}
?>

当此代码运行时,它将刷新同一页面并显示域是否正在运行,而我想要的是在同一页面中加载所有内容 预先感谢您的帮助

1 个答案:

答案 0 :(得分:0)

只需添加David所说的,您就需要Ajax。因此,首先您可能想将PHP代码取出到名为processForm.php的新文件中,然后将表单上的action属性设置为action="processForm.php",然后将Jquery CDN库添加到表单页面。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>。 这是一个代码段,只需将其添加到jquery库CDN之后

<script>
$(function() {
// Get the form.
var form = $('#domain-form');

// Set up an event listener for the domain form.
$(form).submit(function(event) {
  // Stop the browser from submitting the form so as to avoid page refresh
  event.preventDefault();
  var formData = $(form).serializeArray();
  var paramObj = {};
  $.each(formData, function(_, kv) {
    paramObj[kv.name] = kv.value;
  });
  var domainName = $(form).find('input[name="domain_name"]').val();
   if(domainName.length === 0) {
     form.prepend("<H2 style='color:red;'>Error: Domain name can not be left empty</H2>");
      return false;
   }
    // Submit the form using AJAX.
    $.ajax({
         type: 'POST',
         url: $(form).attr('action'),
         data: paramObj, // The data sent to the server
         dataType: 'json' // The data type expected of the server response.
         success: function(response) {
           if(response) {
             form.prepend("<H2 style='color:red;'>Domain " + domainName + " has taken.</H2>")
           } else {
             form.prepend("<H2 style='color:red;'>Domain " + domainName + " is available.</H2>")
         }
    })
  });
});
</script>

PHP可能看起来像这样

<?php
  if(isset($_POST['check'])) {
    if ($_POST['domain_name']){
      $name_domain = trim($_POST['domain_name']).$_POST['suffix'];
      $response = @dns_get_record($name_domain, DNS_ALL);
      echo json_encode($response);
    }