如何从AJAX提交的表单中获得响应?

I want to use Acymailing Joomla! component installed at example.com/mailer to manage subscriptions from non Joomla site on example.com

我想要用acymailjoomla !安装在example.com/mailer上的组件，用于管理example.com上的非Joomla站点的订阅

In that case i have simple script

在这种情况下，我有简单的脚本

 $(function () {
    $('form').on('submit', function (e) {
      e.preventDefault();
      $.ajax({
        type: 'post',
        url: 'https://example.com/mailer/index.php?option=com_acymailing&ctrl=sub',
        data: $('form').serialize(),
        success: function () {
          swal('Great success!');
        }
      });
    });
  });

and form

和形式

<form class="form-inline" action="https://example.com/mailer/index.php?option=com_acymailing&ctrl=sub" method="post">
    <div class="form-group">
        <label class="sr-only" for="user_name">Email address</label>
        <input id="user_name"   type="text" name="user[name]" value="" class="form-control" placeholder="Email">
    </div>
    <div class="form-group">
        <label class="sr-only" for="user_email">Password</label>
        <input id="user_email"   type="text" name="user[email]" value="" class="form-control" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-default">Sign Up!</button>
    <input type="hidden" name="user[html]" value="1" />
    <input type="hidden" name="acyformname" value="formAcymailing1" />
    <input type="hidden" name="ctrl" value="sub"/>
    <input type="hidden" name="task" value="optin"/>
    <input type="hidden" name="redirect" value="https://example.com"/>
    <input type="hidden" name="option" value="com_acymailing"/>
    <input type="hidden" name="visiblelists" value=""/>
    <input type="hidden" name="hiddenlists" value="1"/>
</form>

Everything works fine except success, error states...

一切都很好，除了成功、错误……

Joomla Acymailing have sub.php file to handle ajax responses

Joomla acymail有sub.php文件来处理ajax响应

 if($config->get('subscription_message',1) || $ajax){
        if($allowSubscriptionModifications){
            if($statusAdd == 2){
                if($userClass->confirmationSentSuccess){
                    $msg = 'CONFIRMATION_SENT';
                    $code = 2;
                    $msgtype = 'success';
                }else{
                    $msg = $userClass->confirmationSentError;
                    $code = 7;
                    $msgtype = 'error';
                }
            }else{
                if($insertMessage){
                    $msg = 'SUBSCRIPTION_OK';
                    $code = 3;
                    $msgtype = 'success';
                }elseif($updateMessage){

                    $msg = 'SUBSCRIPTION_UPDATED_OK';
                    $code = 4;
                    $msgtype = 'success';
                }else{
                    $msg = 'ALREADY_SUBSCRIBED';
                    $code = 5;
                    $msgtype = 'success';
                }
            }
        }else{
            if($modifySubscriptionSuccess){
                $msg = 'IDENTIFICATION_SENT';
                $code = 6;
                $msgtype = 'warning';
            }else{
                $msg = $modifySubscriptionError;
                $code = 8;
                $msgtype = 'error';
            }
        }

        if($msg == strtoupper($msg)){
            $source = acymailing_getVar('cmd', 'acy_source');
            if(strpos($source, 'module_') !== false){
                $moduleId = '_'.strtoupper($source);
                if(acymailing_translation($msg.$moduleId) != $msg.$moduleId) $msg = $msg.$moduleId;
            }
            $msg = acymailing_translation($msg);
        }

        $replace = array();
        $replace['{list:name}'] = '';
        foreach($myuser as $oneProp => $oneVal){
            $replace['{user:'.$oneProp.'}'] = $oneVal;
        }
        $msg = str_replace(array_keys($replace),$replace,$msg);

        if($config->get('redirect_tags', 0) == 1) $redirectUrl = str_replace(array_keys($replace),$replace,$redirectUrl);

        if($ajax){
            $msg = str_replace(array("\n","\r",'"','\\'),array(' ',' ',"'",'\\\\'),$msg);
            echo '{"message":"'.$msg.'","type":"'.($msgtype == 'warning' ? 'success' : $msgtype).'","code":"'.$code.'"}';
        }elseif(empty($redirectUrl)){
            acymailing_enqueueMessage($msg,$msgtype == 'success' ? 'info' : $msgtype);
        }else{
            if(strlen($msg)>0){
                if($msgtype == 'success') acymailing_enqueueMessage($msg);
                elseif($msgtype == 'warning') acymailing_enqueueMessage($msg,'notice');
                else acymailing_enqueueMessage($msg,'error');
            }
        }
    }

And JSON looks like on Joomla side registration to the same form by index.php?option=com_acymailing&ctrl=sub

JSON看起来就像Joomla边的注册一样。php?option=com_acymailing&ctrl=sub。

 message    Subscribe confirmed
 type   success
 code   3

 {"message":"Subscribe confirmed","type":"success","code":"3"}

The question is: how to obtain that submission statuses success, error, already submbited etc on external submission form (at example.com page)?

问题是:如何获得提交状态的成功、错误、已经在外部提交表单(example.com页面)上的子轨道?

6 个解决方案

#1

I don't feel your ajax had issues, what i can see from the Joomla php code, everytime when you request that joomla URL you will always get a response header status code as 200, so your javascript will always land on success block of ajax code, returning with some json based message, when i checked the joomla acymaling (version 5.8.1 for joomla 3.8.3) code for that controller, i saw on line number 74 they are checking if the request is made using ajax, but missing Access-Control-Allow-Origin in php header which will restrict your outside call so you can replace this if condition from :

我不觉得你的ajax有问题,我可以看到从Joomla php代码,每次当你要求Joomla URL你总是会得到一个响应头状态码200,所以你的javascript总是登陆成功的ajax代码块,与一些基于json消息返回,当我检查了Joomla acymaling(版本为Joomla 3.8.3 5.8.1)控制器代码,我在网上看到74号他们检查如果使用ajax请求,但是在php头中缺少accesscontrol - allow- origin，这会限制你的外部调用，这样你就可以在以下情况下替换这个if条件:

if($ajax){
    @ob_end_clean();
    header("Content-type:text/html; charset=utf-8");
}

to

来

if($ajax){
    @ob_end_clean();
    header("Content-type:text/html; charset=utf-8");
    header("Access-Control-Allow-Origin: *");
}

so to allow calls from any other domain as well, but do remember this can also cause vulnerabilities to you joomla code. also you need to change your HTML form as well add one more hidden field in your HTML :

因此，允许从任何其他域调用，但请记住，这也可能导致joomla代码的漏洞。您还需要更改HTML表单，并在HTML中添加一个隐藏字段:

<input type="hidden" name="ajax" value="1" />

so to allow ajax request by your joomla controller file.

允许joomla控制器文件发出ajax请求。

now in your success block of ajax you can make a check something like this :

现在，在ajax的成功块中，您可以做如下检查:

success:function(data, status, xhr){
    var json = $.parseJSON(data);
    swal(json.message, json.type);
}

I hope this will help you in acomplishing what you want to, Happy coding.

我希望这能帮助你实现你想要的，快乐的编码。

#2

this simple change may do it for you:

这个简单的改变可以帮助你:

$(function () {
  $('form').on('submit', function (e) {
    e.preventDefault();
    $.ajax({
        type: 'post',
        url: 'https://example.com/mailer/index.php?option=com_acymailing&ctrl=sub',
        data: $('form').serialize()
      }
    }).done(function (data) {
        swal('Great success!');
    });
  });
});

I personally like:

我个人非常喜欢:

$.post("https://example.com...", {
    data: $('form').serialize()
}, function(data) {
    swal('Great success!');
});

since your result is in JSON, that should be more like:

由于结果是JSON，所以应该更类似:

$.post("https://example.com...", {
    data: $('form').serialize()
}, function(data) {
    console.log(data); // shows full return object in console
    swal('Great success!');
}, "json");

#3

Try the following, I have explained the changes inside comments:

试试下面，我已经解释了里面的修改意见:

$(function () {
    $('form').on('submit', function (e) {
        e.preventDefault();
        var formdata = $(this).serializeArray(); //i really prefer serializeArray better than serialize (up2u)
        $.ajax({
            type: 'post',
            dataType: 'json', //because your data is json
            url: 'https://example.com/mailer/index.php?option=com_acymailing&ctrl=sub',
            data: formdata, 
            success: function (d) {//d is the return/response of your url (your question answer)
                swal(
                  d.type+': '+d.code ,
                  d.message,
                  d.type
                );
            },
            error: function(d){
                swal(
                  'Oops..' ,
                  'Something went wrong!', //your json must be in trouble
                  'error'
                );
                console.log(d); //delete this in production stage
                console.log(d.responseText); //i add this so you will know what happenned exactly when you get this error. delete this too in production stage
            }
        });
    });
});

#4

I also face this type of problem.for solving this type of problem i Put a variable in the success as argument html.

我也面临这类问题。为了解决这类问题，我在success中添加了一个变量作为参数html。

e.g. success(html)

and

和

console.log(html)

console.log(html)

this shows all errors including notices and all. turn on errore_reporting['E_ALL'];. and do not set dataType to 'json' .

这将显示所有错误，包括通知和所有错误。打开errore_reporting[' E_ALL ');。不要将数据类型设置为“json”。

#5

Simple solution to your question is :

你的问题的简单解决办法是:

success: function (data) {
    $("#<id_of_tag>").html(data);
}

data : Response returned from the server to your AJAX call

数据:从服务器返回到AJAX调用的响应。

id_of_tag : where you want to display your returned output.

在哪里显示返回的输出。

Its just an example, you can decide, what kind of data you want to return and what you want to do with your response.

它只是一个例子，您可以决定，您想要返回什么样的数据，以及您想要如何处理您的响应。

To answer your question: On Success parameter in function will contain your response.

回答你的问题:On Success参数in function将包含你的回答。

As in my case, i am returning another JSP page, which i want to display in div tag.

在我的例子中，我正在返回另一个JSP页面，我想在div标记中显示这个页面。

Also check below link : I think it might help you

也看看下面的链接:我想它可能会对你有所帮助。

Best way to check if AJAX request was successful in jQuery

检查AJAX请求在jQuery中是否成功的最佳方法

#6

I just looked at the source code and it looks like the script was written by someone who doesn't know the correct Content-Type for JSON or how to use json_encode. You need to make the following change to your AJAX code:

我只是查看了源代码，看起来这个脚本是由一个不知道JSON的正确内容类型或者不知道如何使用json_encode的人编写的。您需要对AJAX代码做以下更改:

$(function() {
  $('form').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
      type: 'post',
      url: 'https://example.com/mailer/index.php?option=com_acymailing&ctrl=sub',
      data: $('form').serialize(),
      success: function(jsonAsHtml) {
        // the script sets Content-Type to text/html
        // so jQuery's "intelligent guessing" fails
        // you must call parseJSON on the content yourself
        var data = $.parseJSON(jsonAsHtml);
        swal('Great success! message=' + data.message + ', type=' + data.type + ', code=' + data.code);
      }
    });
  });
});