创建ajax联系表单。

时间:2018-01-27 06:13:31

标签: jquery ajax ajaxform

我创建了一个ajax联系表单,它有一个responseText问题。当我点击提交按钮发送数据。而是显示响应文本,它显示如下。

<!DOCTYPE html> <html lang="en-US" class="no-js"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="http://localhost/pomtech/jami/xmlrpc.php"> <!--[if lt IE 9]> <script src="http://localhost/pomtech/jami/wp-content/themes/twentyfifteen/js/html5.js"></script> <![endif]--> <script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script> <title>Page not found &#8211; jami university</title> <link rel='dns-prefetch' href='//fonts.googleapis.com' /> ...

Ajax代码。 这是我用来获取表单数据的一些jQuery代码。

   jQuery(document).ready(function(){
   var form =jQuery('#ajax-contact');
  var formMessages= jQuery('#form_messages');
  jQuery(form).submit(function(event){
  event.preventDefault();

 var formData=jQuery(form).serialize();
 jQuery.ajax({
   type: 'POST',
   ulr: jQuery(form).attr('action'),
   data: formData
 }).done(function(response){

    // make sure message is success 
    jQuery(formMessages).removeClass('error');
    jQuery(formMessages).addClass('success');

    //set message text
    jQuery(formMessages).text(response);

    // clear form fields
    jQuery('#name').val('');
    jQuery('#email').val('');
    jQuery('#message').val('');
 }).fail(function(data){
       // make sure message is error     
    jQuery(formMessages).removeClass('success');
    jQuery(formMessages).addClass('error');


    // set message text
    if(data.responseText !== ''){
        jQuery(formMessages).text(data.responseText);
    }
    else{
        jQuery(formMessages).text('an error has been occured');
    }
 });  });  });

HTML代码

  <div id="form_messages"> </div>


<form id="ajax-contact" method="post" action="mailer.php">
<div class="field">
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" required="required">
</div>  
<div class="field">
   <label for="email">Email:</label>
   <input type="email" name="email" id="email" required="required">
</div>
<div class="field">
  <label for="message">Message:</label>
  <textarea id="message" name="message" required="required">

  </textarea>
</div>   
<br>
<input type="hidden" name="recipient" value="'.$recipient.'">
<input type="hidden" name="subject" value="'.$subject.'">

<div class="field">
  <input type="submit" name="contact_submit" value="Send" >
</div>
</form>

mailer.php

<?php echo "Hello world"; ?>

不需要更多细节,但stackoverflow没有让我用更少的信息发布我的问题。所以这些背景属于我的问题

1 个答案:

答案 0 :(得分:1)

改变&#39; ulr&#39;到&#39; url&#39;在AJAX Call。

jQuery.ajax({
   type: 'POST',
   url: jQuery(form).attr('action'),
   data: formData
})