2012-11-02 63 views
1

我在Symfony2項目中有一個表單,我需要提交表單。第一個想法是使用ajax提交,但問題是這不會通過symfony2所需的驗證,並且我得到CSRF錯誤消息(請參閱我的前置問題:Symfony2: The CSRF token is invalid. Please try to resubmit the form)。Symfony2和提交機智JavaScript:如何獲取html內容

感謝@ Elnur的回答,我現在可以使用$ post提交表單,但有另一個問題。

隨着阿賈伊,我正在回一個HTML響應,我能ASIGN這個響應HTML元素:

$.ajax({ 
    type: "POST", 
    async: true, 
    url: href, 
    cache: false, 
    dataType: "json", 
    success: function(data) { 
     $("#content .contentwrap .itemwrap").html(data.content); 
    } 
}); 

這裏是我從得到響應:

<div class="item item-last"> 
<h1>Create Affiliation</h1> 
     <div class="error"> 
     <ul><li>The CSRF token is invalid. Please try to resubmit the form</li></ul> 
     <ul><li>The Affiliation should not be blank</li></ul> 

    </div> 

</div> 
<div class="item item-last"> 
<form action="/app_dev.php/user/submission/affiliation/create/4a0ad9f8020c5cd5712ff4c4c8921b32?ajax=no" method="POST" class="authorForm" > 
    <div style="float:left;"> 
     <table width="100%" cellspacing="0" cellpadding="0"> 
      <tr> 
       <td> 
        <label for="submissionAffiliationForm_affiliation" class=" required">Affiliation</label> 
       </td> 
       <td> 
        <input type="text" id="submissionAffiliationForm_affiliation" name="submissionAffiliationForm[affiliation]" required="required" size="40" /> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        &nbsp; 
       </td> 
       <td> 
        <div class="button button-left button-cancel"> 
         <img src="/bundles/sciforumversion2/images/design/new/button-red.png"/> 
         <a href="/app_dev.php/user/submission/author/edit/4a0ad9f8020c5cd5712ff4c4c8921b32/0" class="submission_link">cancel</a> 
        </div> 
        <div style="float: left;">&nbsp;</div> 
        <div class="button button-left button-cancel"> 
         <img src="/bundles/sciforumversion2/images/design/new/button.png"/> 
         <input type="submit" name="login" value="submit" /> 
        </div> 
        <div style="clear: both;"></div> 
       </td> 
      </tr> 
     </table> 
    </div> 

    <input type="hidden" id="submissionAffiliationForm__token" name="submissionAffiliationForm[_token]" value="de9690f61f0ee5f30fdcc5152f44e76787f34bbb" /> 

</form> 
</div> 

但現在,當使用後:

$.post($this.attr('action'), $this.serialize(), function (data) { 
    $("#content .contentwrap .itemwrap").html(data); 
}); 

我沒有得到了HTML,但JSON格式的響應我不知道如何從中提取他的正確信息。

這裏是我從後得到響應:

{"responseCode":400,"errors":false,"submitted":false,"content":"<!DOCTYPE html>\n<html>\n <head>\n  <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>\n  <meta http-equiv=\"refresh\" content=\"1;url=\/app_dev.php\/user\/submission\/4a0ad9f8020c5cd5712ff4c4c8921b32\" \/>\n\n  <title>Redirecting to \/app_dev.php\/user\/submission\/4a0ad9f8020c5cd5712ff4c4c8921b32<\/title>\n <\/head>\n <body>\n  Redirecting to <a href=\"\/app_dev.php\/user\/submission\/4a0ad9f8020c5cd5712ff4c4c8921b32\">\/app_dev.php\/user\/submission\/4a0ad9f8020c5cd5712ff4c4c8921b32<\/a>.\n <\/body>\n<\/html>","notice":""} 

這裏是如何看起來像個控制器:

$em   = $this->getDoctrine()->getEntityManager(); 
    // get the user object 
    $user  = $this->get('security.context')->getToken()->getUser(); 
    $submission = $em->getRepository('SciForumVersion2Bundle:Submission')->findOneBy(array("hash_key"=>$hash_key)); 
    $author  = $em->getRepository('SciForumVersion2Bundle:SubmissionAuthor')->findOneBy(array("id"=>$author_id, "hash_key"=>$hash_key)); 
    if($author == null) { 
     $author = new SubmissionAuthor(); 
     $author->setPerson(new Person()); 
    } 

    $enquiry = new Affiliation(); 
    $formType = new SubmissionAffiliationFormType(); 
    $form  = $this->createForm($formType, $enquiry); 

    $request = $this->getRequest(); 
    $valid  = true; 
    $error  = ''; 
    if($request->get('cancel') == 'yes') return $this->redirect($this->generateUrl('SciForumVersion2Bundle_user_submission', array("key"=>$submission->getHashKey()))); 
    if ($request->getMethod() == 'POST' && $request->get('ajax') == 'no') { 

     $form->bindRequest($request); 

     if ($valid = $form->isValid()) { 

      if($valid) { 

       $em->persist($enquiry); 
       $em->flush(); 

       $uAff = new UserAffiliation(); 
       $uAff->setUserId($user->getId()); 
       $uAff->setAffiliationId($enquiry->getId()); 
       $uAff->setUser($user); 
       $uAff->setAffiliation($enquiry); 
       $em->persist($uAff); 
       $em->flush(); 

       // Redirect - This is important to prevent users re-posting 
       // the form if they refresh the page 
       return $this->redirect($this->generateUrl('SciForumVersion2Bundle_user_submission', array("key"=>$submission->getHashKey()))); 
      } 
     } 
+0

,你能告訴我們你的控制器? – Touki

+0

@Touki,謝謝。我會在一分鐘內更新我的問題。 –

+1

您的AJAX請求預計會有回報。 Symfony正試圖重定向用戶。您不能從AJAX請求重定向。如果你想顯示的內容只是做。 '$(「#content.contentwrap .itemwrap」)。html(data.content);' – Touki

回答

3

您的問題是,你回一個完整的新的HTML內容。
你只需要返回你的JS可以理解的信息,並按照你想要的方式處理。

use Symfony\Component\HttpFoundation\Response; 

SF中的這個類允許您返回純文本內容。

這是一種使用它的方法。

if ($valid) { 
    $data = array(
     'success' => true, 
     'responseCode' => 307, /* Redirect Temp */ 
     'redirectURI' => $this->generateUrl('SciForumVersion2Bundle_user_submission', array("key"=>$submission->getHashKey())), 
     'message' => '<h3>You\'re about to be redirected...</h3>' 
    ); 
} else { 
    $data = array(
     'success' => false, 
     'responseCode' => 400, /* Bad Request */ 
     'message' => '<h3 class="error">Cannot send form<br>* Field NAME is empty</h3>' 
    ); 
} 
$json = json_encode($data); 
/* Response($data,$statusCode,$additionnalHeaders) */ 
return new Response($json,200,array('Content-Type'=>'application/json')); 

然後在你的JS

$.ajax({ 
    url: "uri/to/controller", 
    type: "POST", 
    data: values, /* Sent data */ 
    cache: false, 
    success : function(data,e,xhr){ 
     if (xhr.status == 200) { 
      if (data.responseCode == 200) { /* Success, just a message */ 
       $("#content .contentwrap .itemwrap") 
        .addClass("success") 
        .html(data.message); 
      } else if (data.responseCode == 307) { /* Redirection */ 
       $("#content .contentwrap .itemwrap") 
        .addClass("success") 
        .html(data.message); 
       setTimeout(function(){ 
        $(window).attr("location",data.redirectURI); 
       },3000); 
      } else if (data.responseCode == 400) { /* Invalid Form */ 
       $("#content .contentwrap .itemwrap") 
        .addClass("error") 
        .html(data.message); 
      } else { /* Could not understand Response Code */ 
       $("#content .contentwrap .itemwrap") 
        .html("<h3>Technical issue occured. Please come back later.</h3>"); 
      } 
     } else { 
      $("#content .contentwrap .itemwrap") 
       .html("<h3>Technical issue occured. Please come back later.</h3>"); 
     } 
    } 
}) 

你可以想象任何參數通過$data

我以前HTTP/1.1代碼談話使用Javascript,但你可以使用任何你想要的
例如:

'action' => 'redirect' 
'youAreGoingTo' => 'printAwesomeMessage' 

JS

if (data.action == 'redirect') 

if (data.youAreGoingTo == 'printAwesomeMessage') 
+0

偉大的答案和優秀的幫助,真正的專業。非常感謝。 –