最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jquery .ajax() issue - Stack Overflow

programmeradmin3浏览0评论

I am using Jquery 1.7.1 and am having issues.. I'm working with a CRM in my script and am working to get the page finished but I'm stuck with this issue..

my html:

<form class="collector" action=".php" method="POST">
  <input type="hidden" name="method" value="NewProspect">
  <input type="hidden" name="campaignId" value="3">
  <input type="hidden" name="ipAddress" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">
  <fieldset>
    <div style=" padding-left: 50px">
      <table>
        <tr>
          <td><span style="color:red;">*</span>Your First Name: 
              <span id="rfvFirstName" style="display:none;">*</span>
          </td>
          <td><span style="color:red;">*</span>Your Last Name: 
              <span id="rfvFirstName" style="display:none;">*</span>
          </td>
                                            <td><span style="color:red;">*</span>Your Phone Number: </td>
                                            <td><span style="color:red;">*</span>Primary Email: </td>
                                        </tr>
                                        <tr>
                                            <td>
                                            <input name="firstName" type="text" id="firstName" style="width:150px;" value="">
                                            </td>
                                            <td>
                                            <input name="lastName" type="text" id="lastName" style="width:150px;" value="">
                                            </td>
                                            <td>
                                            <input name="phone" type="text" id="phone" class="" style="width:150px;" value="">
                                            </td>
                                            <td>
                                            <input name="email" type="text" id="email" class="required email" style="width:150px;" value="">
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="clear"></div>
                                <center>
                                    <input type="submit" name="continue" id="imgbtnSubmit" class="button" style="background-image: url('<?php echo base_url();?>inc/img/button-check.png');
                                background-repeat: no-repeat; width: 348px; height: 46px; border:none; background-color:transparent;" value="" />
                                </center>
                            </fieldset>
                            <p align="center" style="font-size:12px;">
                                &nbsp;
                            </p>
                        </form>

the JS:

$('.collector').submit(function(){
    validate = true;
        $(this).find("input:text:visible:enabled").each(function() {
            if ($(this).attr("value") == "") {
                alert("Please fill in all fields!");
                $(this).focus();
                validate = false;
                return false;
            }
            else if ($(this).hasClass("email") && !$(this).attr("value").match(/@/)) {
                alert("Please enter an email address...");
                $(this).focus();
                validate = false;
                return false;
            }
        });
    if (validate != false)  { 
            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: $(this).serialize(),
                success: function(response) { 
                    alert(response);
                }
            });
        }
    return false;
});

Now both of these things work, and they work together fine... the issue es in that I don't get any response and I'm not sure why. I imagine it is because of what firebug is saying... POST .php 200 OK 1.04s jquery.js (line 8102)

This line in my firebug is displayed as red, and the line 8102 in jquery.js is: xhr.send( ( s.hasContent && s.data ) || null );

I am using Jquery 1.7.1 and am having issues.. I'm working with a CRM in my script and am working to get the page finished but I'm stuck with this issue..

my html:

<form class="collector" action="https://www.domain.biz/admin/transact.php" method="POST">
  <input type="hidden" name="method" value="NewProspect">
  <input type="hidden" name="campaignId" value="3">
  <input type="hidden" name="ipAddress" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">
  <fieldset>
    <div style=" padding-left: 50px">
      <table>
        <tr>
          <td><span style="color:red;">*</span>Your First Name: 
              <span id="rfvFirstName" style="display:none;">*</span>
          </td>
          <td><span style="color:red;">*</span>Your Last Name: 
              <span id="rfvFirstName" style="display:none;">*</span>
          </td>
                                            <td><span style="color:red;">*</span>Your Phone Number: </td>
                                            <td><span style="color:red;">*</span>Primary Email: </td>
                                        </tr>
                                        <tr>
                                            <td>
                                            <input name="firstName" type="text" id="firstName" style="width:150px;" value="">
                                            </td>
                                            <td>
                                            <input name="lastName" type="text" id="lastName" style="width:150px;" value="">
                                            </td>
                                            <td>
                                            <input name="phone" type="text" id="phone" class="" style="width:150px;" value="">
                                            </td>
                                            <td>
                                            <input name="email" type="text" id="email" class="required email" style="width:150px;" value="">
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="clear"></div>
                                <center>
                                    <input type="submit" name="continue" id="imgbtnSubmit" class="button" style="background-image: url('<?php echo base_url();?>inc/img/button-check.png');
                                background-repeat: no-repeat; width: 348px; height: 46px; border:none; background-color:transparent;" value="" />
                                </center>
                            </fieldset>
                            <p align="center" style="font-size:12px;">
                                &nbsp;
                            </p>
                        </form>

the JS:

$('.collector').submit(function(){
    validate = true;
        $(this).find("input:text:visible:enabled").each(function() {
            if ($(this).attr("value") == "") {
                alert("Please fill in all fields!");
                $(this).focus();
                validate = false;
                return false;
            }
            else if ($(this).hasClass("email") && !$(this).attr("value").match(/@/)) {
                alert("Please enter an email address...");
                $(this).focus();
                validate = false;
                return false;
            }
        });
    if (validate != false)  { 
            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: $(this).serialize(),
                success: function(response) { 
                    alert(response);
                }
            });
        }
    return false;
});

Now both of these things work, and they work together fine... the issue es in that I don't get any response and I'm not sure why. I imagine it is because of what firebug is saying... POST https://www.domain.biz/admin/transact.php 200 OK 1.04s jquery.js (line 8102)

This line in my firebug is displayed as red, and the line 8102 in jquery.js is: xhr.send( ( s.hasContent && s.data ) || null );

Share Improve this question edited Jan 10, 2012 at 0:42 Bassam Mehanni 14.9k2 gold badges35 silver badges41 bronze badges asked Jan 10, 2012 at 0:38 JohnnyJohnny 8513 gold badges10 silver badges25 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 1

Here are some suggestions that might help you find the error:

In your ajax call, after the success, add the following code:

success: function(response) { 
    alert(response);
},
error: function(response) {
    console.log(response.status + " " + response.statusText);
}

That will print in your console a clue to what is causing this error.

By the way, there are some other suggestions, your validations can be achieved with the new HTML5 input types (email, phone), if you have to maintain patibility with browsers that don't support these, you can find a jQuery plugin that handles this.

Do you make an cross domain ajax request ? I downloaded your code and make a simple test:

Code in

  • localhost:8080/domain1/a.php

Make a ajax request to

  • localhost:8080/domain2/b.php

Error happens

Code in

  • localhost:8080/domain1/a.php

Make a ajax request to the page itself

  • (localhost:8080/domain1/a.php)

No error happens and get the expected response.

Then I googled the answer for [jquery.ajax cross domain request],and find some links may helps: jQuery AJAX cross domain

Soluation is : dataType: 'JSONP'

$.ajax({
 url:"testserver.php",
 dataType: 'JSONP', // Notice! JSONP <-- P
 success:function(json){
     // do stuff with json (in this case an array)
     alert("Success");
 },
 error:function(){
     alert("Error");
 },
 });

I'm not sure about using $(this).serialize(). Have you tried using $('.collector').serialize() (or whichever the form is) since inside the ajax request the context may change. It's just a quick guess, hope it helps.

The same thing happened to me.And I used the same version of JQuery (1.7.1) And the weirdest thing is that after adding "asyn:false ",it worked out. I guess this might be a bug of JQuery.

发布评论

评论列表(0)

  1. 暂无评论